From 112837197afc8d77837cdd34cc9b280f775b645c Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Sat, 24 Jan 2026 13:56:06 -0800
Subject: [PATCH 01/11] Add gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..22b6d02
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# dependencies
+node_modules/
\ No newline at end of file

From 854e92fa61652cdd65397f331beb40e9867dd303 Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Sat, 24 Jan 2026 14:01:33 -0800
Subject: [PATCH 02/11] Added build output to gitignore

---
 .gitignore | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 22b6d02..2c62204 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,5 @@
 # dependencies
-node_modules/
\ No newline at end of file
+node_modules/
+
+# build output
+.next/

From a4f29e313603419c867e3313a7452e2db4aa9e0e Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Sat, 24 Jan 2026 14:07:02 -0800
Subject: [PATCH 03/11] Created blog page

---
 app/blog/page.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 app/blog/page.tsx

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
new file mode 100644
index 0000000..e69de29

From 91ac0af05976e0b0e74252585940f82d843f4735 Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Sat, 24 Jan 2026 20:46:29 -0800
Subject: [PATCH 04/11] Added announcements and updates to blog page

---
 app/blog/page.tsx | 91 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index e69de29..1cd2bb2 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -0,0 +1,91 @@
+"use client";
+import { useState } from "react";
+
+const slides = [
+  "image.png",
+  "image.png",
+  "image.png",
+  "image.png",
+  "image.png",
+];
+
+export default function BlogPage() {
+    const [index, setIndex] = useState(0);
+    const total = slides.length;
+
+    const prev = () =>
+    setIndex((i) => (i === 0 ? total - 1 : i - 1));
+
+    const next = () =>
+    setIndex((i) => (i === total - 1 ? 0 : i + 1));
+
+    const get = (offset : number) =>
+    slides[(index + offset + total) % total];
+
+    return (
+        <main className="min-h-screen bg-[#FDFCF7] text-base">
+            <div className="px-32 py-12 space-y-12">
+                <img
+                src="image.png"
+                alt="image"
+                className="w-full max-w-[1160px] h-[306px]"
+                />
+
+                <section className="space-y-10">
+                    <h1 className="text-5xl font-serif tracking-wide">ANNOUNCEMENTS</h1>
+                    <div className="grid grid-cols-2 gap-[16px]">
+                        <div className="h-[124px] bg-[#D9D9D9]"></div>
+                        <div className="h-[124px] bg-[#D9D9D9]"></div>
+                        <div className="h-[124px] bg-[#D9D9D9]"></div>
+                        <div className="h-[124px] bg-[#D9D9D9]"></div>
+                    </div>
+                </section>
+
+                <section className="space-y-10">
+                    <h1 className="text-5xl font-serif tracking-wide">UPDATES</h1>
+                    <div className="flex items-center justify-center gap-8">
+
+                        {/* Previous slide */}
+                        <img
+                            src={get(-1)}
+                            alt="previous update"
+                            className="h-[180px] w-[180px] object-cover transition-all duration-300"
+                        />
+
+                        {/* Left arrow */}
+                        <button
+                            onClick={prev}
+                            className="text-4xl font-light hover:opacity-60"
+                        >
+                            &#8249;
+                        </button>
+
+                        {/* Active slide */}
+                        <img
+                            src={get(0)}
+                            alt="current update"
+                            className="h-[280px] w-[280px] object-cover transition-all duration-300"
+                        />
+
+                        {/* Right arrow */}
+                        <button
+                            onClick={next}
+                            className="text-4xl font-light hover:opacity-60"
+                        >
+                            &#8250;
+                        </button>
+
+                        {/* Next slide */}
+                        <img
+                            src={get(1)}
+                            alt="next update"
+                            className="h-[180px] w-[180px] object-cover transition-all duration-300"
+                        />
+                    </div>
+                </section>
+            </div>
+            
+        </main>
+
+    );
+}
\ No newline at end of file

From ba76ae4172b5003fe865cd6aceed937e2a553455 Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Sat, 24 Jan 2026 20:55:15 -0800
Subject: [PATCH 05/11] Added the media section of blog page

---
 app/blog/page.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 1cd2bb2..5435b73 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -49,7 +49,7 @@ export default function BlogPage() {
                         <img
                             src={get(-1)}
                             alt="previous update"
-                            className="h-[180px] w-[180px] object-cover transition-all duration-300"
+                            className="h-[226px] w-[234px] object-cover transition-all duration-300"
                         />
 
                         {/* Left arrow */}
@@ -64,7 +64,7 @@ export default function BlogPage() {
                         <img
                             src={get(0)}
                             alt="current update"
-                            className="h-[280px] w-[280px] object-cover transition-all duration-300"
+                            className="h-[419px] w-[416px] object-cover transition-all duration-300"
                         />
 
                         {/* Right arrow */}
@@ -79,12 +79,21 @@ export default function BlogPage() {
                         <img
                             src={get(1)}
                             alt="next update"
-                            className="h-[180px] w-[180px] object-cover transition-all duration-300"
+                            className="h-[226px] w-[234px] object-cover transition-all duration-300"
                         />
                     </div>
                 </section>
+                
+                <section className="space-y-10">
+                    <h1 className="text-5xl font-serif tracking-wide">MEDIA</h1>
+                    <div className="grid grid-cols-2 gap-[16px]">
+                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
+                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
+                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
+                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
+                    </div>
+                </section>
             </div>
-            
         </main>
 
     );

From 2b29b4a0a92e904e8ec1da76ca12519e9e8a8069 Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Sat, 24 Jan 2026 20:57:15 -0800
Subject: [PATCH 06/11] Moved next-env.d.ts to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 2c62204..244a368 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 
 # build output
 .next/
+next-env.d.ts
\ No newline at end of file

From 89e6754a88969c01c45c6b7e0b386dbca33b5979 Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Fri, 30 Jan 2026 21:19:05 -0800
Subject: [PATCH 07/11] Made updates into components

---
 app/blog/Updates.tsx | 12 +++++++++++
 app/blog/page.tsx    | 47 ++++++++++++++++++++++----------------------
 2 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 app/blog/Updates.tsx

diff --git a/app/blog/Updates.tsx b/app/blog/Updates.tsx
new file mode 100644
index 0000000..f12f6a4
--- /dev/null
+++ b/app/blog/Updates.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface UpdatesProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Updates: React.FC<UpdatesProps> = ({ className, children }) => {
+  return <div className={`bg-[#D9D9D9] ${className || ''}`}>{children}</div>;
+};
+
+export default Updates;
\ No newline at end of file
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 5435b73..1c84fe2 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -1,17 +1,18 @@
 "use client";
 import { useState } from "react";
+import Updates from './Updates';
 
-const slides = [
-  "image.png",
-  "image.png",
-  "image.png",
-  "image.png",
-  "image.png",
+const updateContents = [
+  "Update 1",
+  "Update 2",
+  "Update 3",
+  "Update 4",
+  "Update 5",
 ];
 
 export default function BlogPage() {
     const [index, setIndex] = useState(0);
-    const total = slides.length;
+    const total = updateContents.length;
 
     const prev = () =>
     setIndex((i) => (i === 0 ? total - 1 : i - 1));
@@ -20,7 +21,7 @@ export default function BlogPage() {
     setIndex((i) => (i === total - 1 ? 0 : i + 1));
 
     const get = (offset : number) =>
-    slides[(index + offset + total) % total];
+    updateContents[(index + offset + total) % total];
 
     return (
         <main className="min-h-screen bg-[#FDFCF7] text-base">
@@ -46,11 +47,11 @@ export default function BlogPage() {
                     <div className="flex items-center justify-center gap-8">
 
                         {/* Previous slide */}
-                        <img
-                            src={get(-1)}
-                            alt="previous update"
-                            className="h-[226px] w-[234px] object-cover transition-all duration-300"
-                        />
+                        <Updates
+                            className="h-[226px] w-[234px] transition-all duration-300 flex items-center justify-center text-center p-4 text-sm"
+                        >
+                            {get(-1)}
+                        </Updates>
 
                         {/* Left arrow */}
                         <button
@@ -61,11 +62,11 @@ export default function BlogPage() {
                         </button>
 
                         {/* Active slide */}
-                        <img
-                            src={get(0)}
-                            alt="current update"
-                            className="h-[419px] w-[416px] object-cover transition-all duration-300"
-                        />
+                        <Updates 
+                            className="h-[419px] w-[416px] transition-all duration-300 flex items-center justify-center text-center p-6 text-lg"
+                        >
+                            {get(0)}
+                        </Updates>
 
                         {/* Right arrow */}
                         <button
@@ -76,11 +77,11 @@ export default function BlogPage() {
                         </button>
 
                         {/* Next slide */}
-                        <img
-                            src={get(1)}
-                            alt="next update"
-                            className="h-[226px] w-[234px] object-cover transition-all duration-300"
-                        />
+                        <Updates
+                            className="h-[226px] w-[234px] transition-all duration-300 flex items-center justify-center text-center p-4 text-sm"
+                        >
+                            {get(1)}
+                        </Updates>
                     </div>
                 </section>
                 

From 73574492648b3b78b2f1a83c333a1a68545ebc43 Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Fri, 30 Jan 2026 21:27:13 -0800
Subject: [PATCH 08/11] Made announcement boxes into components

---
 app/blog/Announcement.tsx | 12 ++++++++++++
 app/blog/page.tsx         |  9 +++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 app/blog/Announcement.tsx

diff --git a/app/blog/Announcement.tsx b/app/blog/Announcement.tsx
new file mode 100644
index 0000000..5d1766f
--- /dev/null
+++ b/app/blog/Announcement.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface AnnouncementProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Announcement: React.FC<AnnouncementProps> = ({ className, children }) => {
+  return <div className={`bg-[#D9D9D9] h-[124px] ${className || ''}`}>{children}</div>;
+};
+
+export default Announcement;
\ No newline at end of file
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 1c84fe2..a8fbc79 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { useState } from "react";
 import Updates from './Updates';
+import Announcement from './Announcement';
 
 const updateContents = [
   "Update 1",
@@ -35,10 +36,10 @@ export default function BlogPage() {
                 <section className="space-y-10">
                     <h1 className="text-5xl font-serif tracking-wide">ANNOUNCEMENTS</h1>
                     <div className="grid grid-cols-2 gap-[16px]">
-                        <div className="h-[124px] bg-[#D9D9D9]"></div>
-                        <div className="h-[124px] bg-[#D9D9D9]"></div>
-                        <div className="h-[124px] bg-[#D9D9D9]"></div>
-                        <div className="h-[124px] bg-[#D9D9D9]"></div>
+                        <Announcement />
+                        <Announcement />
+                        <Announcement />
+                        <Announcement />
                     </div>
                 </section>
 

From 4065e8113084cde3d1ee80d342639b726988f95f Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Fri, 30 Jan 2026 21:33:18 -0800
Subject: [PATCH 09/11] Moved css for Updates into the component

---
 app/blog/Updates.tsx | 2 +-
 app/blog/page.tsx    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/blog/Updates.tsx b/app/blog/Updates.tsx
index f12f6a4..35833d2 100644
--- a/app/blog/Updates.tsx
+++ b/app/blog/Updates.tsx
@@ -6,7 +6,7 @@ interface UpdatesProps {
 }
 
 const Updates: React.FC<UpdatesProps> = ({ className, children }) => {
-  return <div className={`bg-[#D9D9D9] ${className || ''}`}>{children}</div>;
+  return <div className={`bg-[#D9D9D9] transition-all duration-300 flex items-center justify-center text-center p-4 text-sm${className || ''}`}>{children}</div>;
 };
 
 export default Updates;
\ No newline at end of file
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index a8fbc79..31bf347 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -49,7 +49,7 @@ export default function BlogPage() {
 
                         {/* Previous slide */}
                         <Updates
-                            className="h-[226px] w-[234px] transition-all duration-300 flex items-center justify-center text-center p-4 text-sm"
+                            className="h-[226px] w-[234px]"
                         >
                             {get(-1)}
                         </Updates>
@@ -64,7 +64,7 @@ export default function BlogPage() {
 
                         {/* Active slide */}
                         <Updates 
-                            className="h-[419px] w-[416px] transition-all duration-300 flex items-center justify-center text-center p-6 text-lg"
+                            className="h-[419px] w-[416px]"
                         >
                             {get(0)}
                         </Updates>
@@ -79,7 +79,7 @@ export default function BlogPage() {
 
                         {/* Next slide */}
                         <Updates
-                            className="h-[226px] w-[234px] transition-all duration-300 flex items-center justify-center text-center p-4 text-sm"
+                            className="h-[226px] w-[234px]"
                         >
                             {get(1)}
                         </Updates>

From 149178f8d4cdf1407c62b564222e6fb6b6e8dcaf Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Fri, 30 Jan 2026 21:52:28 -0800
Subject: [PATCH 10/11] Made media into components and fixed updates

---
 app/blog/Media.tsx   | 12 ++++++++++++
 app/blog/Updates.tsx |  2 +-
 app/blog/page.tsx    | 15 ++++++++-------
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 app/blog/Media.tsx

diff --git a/app/blog/Media.tsx b/app/blog/Media.tsx
new file mode 100644
index 0000000..77b1fce
--- /dev/null
+++ b/app/blog/Media.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface MediaProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Media: React.FC<MediaProps> = ({ className, children }) => {
+  return <div className={`bg-[#D9D9D9] h-[422px] rounded-2xl transition-transform duration-300 hover:scale-[1.02] ${className || ''}`}>{children}</div>;
+};
+
+export default Media;
\ No newline at end of file
diff --git a/app/blog/Updates.tsx b/app/blog/Updates.tsx
index 35833d2..835f293 100644
--- a/app/blog/Updates.tsx
+++ b/app/blog/Updates.tsx
@@ -6,7 +6,7 @@ interface UpdatesProps {
 }
 
 const Updates: React.FC<UpdatesProps> = ({ className, children }) => {
-  return <div className={`bg-[#D9D9D9] transition-all duration-300 flex items-center justify-center text-center p-4 text-sm${className || ''}`}>{children}</div>;
+  return <div className={`bg-[#D9D9D9] transition-all duration-300 ${className || ''}`}>{children}</div>;
 };
 
 export default Updates;
\ No newline at end of file
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 31bf347..2737d5a 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -2,6 +2,7 @@
 import { useState } from "react";
 import Updates from './Updates';
 import Announcement from './Announcement';
+import Media from './Media';
 
 const updateContents = [
   "Update 1",
@@ -49,7 +50,7 @@ export default function BlogPage() {
 
                         {/* Previous slide */}
                         <Updates
-                            className="h-[226px] w-[234px]"
+                            className="h-[226px] w-[234px] flex items-center justify-center text-center p-4 text-sm"
                         >
                             {get(-1)}
                         </Updates>
@@ -64,7 +65,7 @@ export default function BlogPage() {
 
                         {/* Active slide */}
                         <Updates 
-                            className="h-[419px] w-[416px]"
+                            className="h-[419px] w-[416px] flex items-center justify-center text-center p-6 text-lg"
                         >
                             {get(0)}
                         </Updates>
@@ -79,7 +80,7 @@ export default function BlogPage() {
 
                         {/* Next slide */}
                         <Updates
-                            className="h-[226px] w-[234px]"
+                            className="h-[226px] w-[234px] flex items-center justify-center text-center p-4 text-sm"
                         >
                             {get(1)}
                         </Updates>
@@ -89,10 +90,10 @@ export default function BlogPage() {
                 <section className="space-y-10">
                     <h1 className="text-5xl font-serif tracking-wide">MEDIA</h1>
                     <div className="grid grid-cols-2 gap-[16px]">
-                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
-                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
-                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
-                        <div className="h-[422px] bg-[#D9D9D9] rounded-2xl"></div>
+                        <Media />
+                        <Media />
+                        <Media />
+                        <Media />
                     </div>
                 </section>
             </div>

From e1ef9fefc4a163ec3325a789a94d6235a4e1125f Mon Sep 17 00:00:00 2001
From: kcharry <kathycharry27@gmail.com>
Date: Fri, 30 Jan 2026 22:02:09 -0800
Subject: [PATCH 11/11] Made page mobile responsive

---
 app/blog/page.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 2737d5a..52943cf 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -27,7 +27,7 @@ export default function BlogPage() {
 
     return (
         <main className="min-h-screen bg-[#FDFCF7] text-base">
-            <div className="px-32 py-12 space-y-12">
+            <div className="px-4 md:px-16 lg:px-32 py-12 space-y-12">
                 <img
                 src="image.png"
                 alt="image"
@@ -35,8 +35,8 @@ export default function BlogPage() {
                 />
 
                 <section className="space-y-10">
-                    <h1 className="text-5xl font-serif tracking-wide">ANNOUNCEMENTS</h1>
-                    <div className="grid grid-cols-2 gap-[16px]">
+                    <h1 className="text-3xl sm:text-4xl lg:text-5xl font-serif tracking-wide">ANNOUNCEMENTS</h1>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
                         <Announcement />
                         <Announcement />
                         <Announcement />
@@ -45,12 +45,12 @@ export default function BlogPage() {
                 </section>
 
                 <section className="space-y-10">
-                    <h1 className="text-5xl font-serif tracking-wide">UPDATES</h1>
-                    <div className="flex items-center justify-center gap-8">
+                    <h1 className="text-3xl sm:text-4xl lg:text-5xl font-serif tracking-wide">UPDATES</h1>
+                    <div className="flex items-center justify-center gap-4 sm:gap-8">
 
                         {/* Previous slide */}
                         <Updates
-                            className="h-[226px] w-[234px] flex items-center justify-center text-center p-4 text-sm"
+                            className="h-[150px] sm:h-[226px] w-full sm:w-[234px] flex items-center justify-center text-center p-2 sm:p-4 text-xs sm:text-sm"
                         >
                             {get(-1)}
                         </Updates>
@@ -58,14 +58,14 @@ export default function BlogPage() {
                         {/* Left arrow */}
                         <button
                             onClick={prev}
-                            className="text-4xl font-light hover:opacity-60"
+                            className="text-2xl sm:text-4xl font-light hover:opacity-60"
                         >
                             &#8249;
                         </button>
 
                         {/* Active slide */}
                         <Updates 
-                            className="h-[419px] w-[416px] flex items-center justify-center text-center p-6 text-lg"
+                            className="h-[250px] sm:h-[419px] w-full sm:w-[416px] flex items-center justify-center text-center p-4 sm:p-6 text-sm sm:text-lg"
                         >
                             {get(0)}
                         </Updates>
@@ -73,14 +73,14 @@ export default function BlogPage() {
                         {/* Right arrow */}
                         <button
                             onClick={next}
-                            className="text-4xl font-light hover:opacity-60"
+                            className="text-2xl sm:text-4xl font-light hover:opacity-60"
                         >
                             &#8250;
                         </button>
 
                         {/* Next slide */}
                         <Updates
-                            className="h-[226px] w-[234px] flex items-center justify-center text-center p-4 text-sm"
+                            className="h-[150px] sm:h-[226px] w-full sm:w-[234px] flex items-center justify-center text-center p-2 sm:p-4 text-xs sm:text-sm"
                         >
                             {get(1)}
                         </Updates>
@@ -88,8 +88,8 @@ export default function BlogPage() {
                 </section>
                 
                 <section className="space-y-10">
-                    <h1 className="text-5xl font-serif tracking-wide">MEDIA</h1>
-                    <div className="grid grid-cols-2 gap-[16px]">
+                    <h1 className="text-3xl sm:text-4xl lg:text-5xl font-serif tracking-wide">MEDIA</h1>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
                         <Media />
                         <Media />
                         <Media />