CelebratePast by phlangiee · Pull Request #23 · HackDavis/website-2026

phlangiee · 2026-01-26T01:37:48Z

looping animation with pictures (minimum of 5, but can be duplicated)
button to view 2025 winners (does nothing currently)
has title and lil note underneath
everything is dependant of width

Copilot

Pull request overview

This PR adds the “CelebratePast” animated photo stack to the About Us experience, updates Tailwind configuration to support its animations and fonts, and refreshes several build/tooling dependencies.

Changes:

Extend tailwind.config.ts with project fonts and custom keyframe animations for the five-picture stack, and wire them to Tailwind animation utilities.
Implement the CelebratePast client component with a looping animated image stack, heading/copy, and a “View 2025 Winners” button, and integrate it into the About Us page.
Update package.json tooling versions (Next.js, Tailwind, ESLint, PostCSS, Autoprefixer, etc.) and add public image assets used by the new component.

Reviewed changes

Copilot reviewed 6 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`tailwind.config.ts`	Defines custom fonts and keyframe animations (`picture1`–`picture5`) plus matching `animation` utilities used by the CelebratePast stack.
`public/placeholder.jpg`	Placeholder asset used in the CelebratePast image rotation.
`public/clouds.jpg`	Asset used in the CelebratePast image rotation.
`public/anotherplaceholder.png`	Additional placeholder asset used in the CelebratePast image rotation.
`package.json`	Bumps Next.js and related tooling (ESLint, Tailwind, PostCSS, Autoprefixer, etc.) to newer versions and reorders some devDependencies.
`app/(pages)/layout.tsx`	Root layout now imports and renders the About Us page component after all route children.
`app/(pages)/about-us/page.tsx`	About Us route page now renders the new `CelebratePast` component instead of simple placeholder text.
`app/(pages)/about-us/_components/CelebratePast/celebratePast.tsx`	New client component implementing the animated photo stack, text content, and 2025 winners button, including animation-end handling and container-based sizing.
`app/(pages)/_globals/styles/globals.scss`	Fixes a minor CSS variable syntax issue (missing semicolon) in the global About Us theme variables.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-26T01:43:19Z

app/(pages)/about-us/page.tsx

@@ -1,7 +1,9 @@
+import CelebratePast from './_components/CelebratePast/CelebratePast';


This import uses ./_components/CelebratePast/CelebratePast, but the actual file in this folder is named celebratePast.tsx (lowercase c). On case-sensitive file systems this will fail to compile at runtime; please update the import path to match the file name exactly (including case).

Suggested change

import CelebratePast from './_components/CelebratePast/CelebratePast';

import CelebratePast from './_components/CelebratePast/celebratePast';

Copilot · 2026-01-26T01:43:19Z

app/(pages)/about-us/_components/CelebratePast/celebratePast.tsx

+    <div className="container-type-inline-size pt-[3cqw] pb-[8cqw] rounded-[8cqw] shadow-[2cqw_2cqw_0_0_#A6BFC7] outline outline-[0.3cqw] outline-[#A6BFC7] md:outline-[0cqw] flex flex-col items-center bg-[#E5EEF1] place-content-center">
+      <div className="p-[2cqw] flex flex-col items-center">
+        <div className="py-[0.5cqw] text-center">
+          <p className="text-[5cqw] md:text-[3cqw] leading-tight text-[#123041] font-bold font-montserrat">
+            Come celebrate
+            <br className="md:hidden" /> our past with us!
+          </p>
+        </div>
+        <div className="py-[0.5cqw] text-center">
+          <p className="text-[2.4cqw] md:text-[1.2cqw] text-[#123041] font-jakarta">
+            We truly could not have done any of this
+            <br className="md:hidden" /> without you. Your support means the
+            world!
+          </p>
+        </div>
+      </div>
+      <div className="h-[50cqw] relative flex items-center justify-center">
+        {images.map((image, index) => (
+          <Pictures
+            key={`${image.path}-${index}`}
+            path={image.path}
+            alt={image.alt}
+            order={index + 1}
+          />
+        ))}
+      </div>
+      <button className="px-[3cqw] py-[1cqw] md:px-[1.5cqw] md:py-[.5cqw] rounded-full bg-[#123041] text-[#F9FBFC]">
+        <p className="text-[3cqw] md:text-[1.3cqw] font-medium font-jakarta tracking-wide">
+          VIEW 2025 WINNERS
+        </p>
+      </button>
+    </div>


The container-type-inline-size utility used here relies on Tailwind's container-queries plugin, but the Tailwind config currently has an empty plugins array and does not enable @tailwindcss/container-queries. As a result this class will not generate any CSS and the cqw units in this component will not behave as intended; either add the appropriate plugin or replace this with a custom CSS rule that sets container-type: inline-size.

Suggested change

<div className="container-type-inline-size pt-[3cqw] pb-[8cqw] rounded-[8cqw] shadow-[2cqw_2cqw_0_0_#A6BFC7] outline outline-[0.3cqw] outline-[#A6BFC7] md:outline-[0cqw] flex flex-col items-center bg-[#E5EEF1] place-content-center">

<div className="p-[2cqw] flex flex-col items-center">

<div className="py-[0.5cqw] text-center">

<p className="text-[5cqw] md:text-[3cqw] leading-tight text-[#123041] font-bold font-montserrat">

Come celebrate

<br className="md:hidden" /> our past with us!

</p>

</div>

<div className="py-[0.5cqw] text-center">

<p className="text-[2.4cqw] md:text-[1.2cqw] text-[#123041] font-jakarta">

We truly could not have done any of this

<br className="md:hidden" /> without you. Your support means the

world!

</p>

</div>

</div>

<div className="h-[50cqw] relative flex items-center justify-center">

{images.map((image, index) => (

<Pictures

key={`${image.path}-${index}`}

path={image.path}

alt={image.alt}

order={index + 1}

/>

))}

</div>

<button className="px-[3cqw] py-[1cqw] md:px-[1.5cqw] md:py-[.5cqw] rounded-full bg-[#123041] text-[#F9FBFC]">

<p className="text-[3cqw] md:text-[1.3cqw] font-medium font-jakarta tracking-wide">

VIEW 2025 WINNERS

</p>

</button>

</div>

<>

<div className="celebrate-container pt-[3cqw] pb-[8cqw] rounded-[8cqw] shadow-[2cqw_2cqw_0_0_#A6BFC7] outline outline-[0.3cqw] outline-[#A6BFC7] md:outline-[0cqw] flex flex-col items-center bg-[#E5EEF1] place-content-center">

<div className="p-[2cqw] flex flex-col items-center">

<div className="py-[0.5cqw] text-center">

<p className="text-[5cqw] md:text-[3cqw] leading-tight text-[#123041] font-bold font-montserrat">

Come celebrate

<br className="md:hidden" /> our past with us!

</p>

</div>

<div className="py-[0.5cqw] text-center">

<p className="text-[2.4cqw] md:text-[1.2cqw] text-[#123041] font-jakarta">

We truly could not have done any of this

<br className="md:hidden" /> without you. Your support means the

world!

</p>

</div>

</div>

<div className="h-[50cqw] relative flex items-center justify-center">

{images.map((image, index) => (

<Pictures

key={`${image.path}-${index}`}

path={image.path}

alt={image.alt}

order={index + 1}

/>

))}

</div>

<button className="px-[3cqw] py-[1cqw] md:px-[1.5cqw] md:py-[.5cqw] rounded-full bg-[#123041] text-[#F9FBFC]">

<p className="text-[3cqw] md:text-[1.3cqw] font-medium font-jakarta tracking-wide">

VIEW 2025 WINNERS

</p>

</button>

</div>

<style jsx>{`

.celebrate-container {

container-type: inline-size;

}

`}</style>

</>

Copilot · 2026-01-26T01:43:19Z

tailwind.config.ts

+          // picture 5 poistion
+          '89%': {
+            transform: 'translateY(0%)',
+            zIndex: '0',
+          },
+          // picture 5 poistion


Typo in this comment: "poistion" should be spelled "position" for clarity.

Suggested change

// picture 5 poistion

'89%': {

transform: 'translateY(0%)',

zIndex: '0',

},

// picture 5 poistion

// picture 5 position

'89%': {

transform: 'translateY(0%)',

zIndex: '0',

},

// picture 5 position

Copilot · 2026-01-26T01:43:19Z

tailwind.config.ts

+          // picture 5 poistion
+          '89%': {
+            transform: 'translateY(0%)',
+            zIndex: '0',
+          },
+          // picture 5 poistion


Typo in this comment: "poistion" should be spelled "position" for clarity.

Suggested change

// picture 5 poistion

'89%': {

transform: 'translateY(0%)',

zIndex: '0',

},

// picture 5 poistion

// picture 5 position

'89%': {

transform: 'translateY(0%)',

zIndex: '0',

},

// picture 5 position

Copilot

Pull request overview

Copilot reviewed 6 out of 12 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-26T02:19:19Z

app/(pages)/about-us/_components/CelebratePast/celebratePast.tsx

+    { path: '/realclouds.jpg', alt: 'amongsus' },
+    { path: '/frog.png', alt: 'among us!!!' },


Two of the configured image paths (/realclouds.jpg and /frog.png) do not exist under public/, which will result in broken images at runtime. Either add these files to public/ or update path values here to point at existing assets so that all five frames render correctly.

Suggested change

{ path: '/realclouds.jpg', alt: 'amongsus' },

{ path: '/frog.png', alt: 'among us!!!' },

{ path: '/placeholder.jpg', alt: 'amongsus' },

{ path: '/anotherplaceholder.png', alt: 'among us!!!' },

Copilot · 2026-01-26T02:19:19Z

package.json

+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.1.3",
    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-lit-a11y": "^1.1.0-next.1",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-unicorn": "^50.0.1",
-    "eslint-plugin-lit-a11y": "^1.1.0-next.1",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.5.6",
+    "prettier": "3.0.3",
+    "tailwindcss": "^3.4.19",
    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "prettier": "3.0.3"
+    "typescript-eslint": "^8.46.3"


@typescript-eslint/eslint-plugin is pinned at ^6.16.0 while typescript-eslint is at ^8.46.3, which mixes two major versions of the same tooling stack and can lead to duplicate installs or config incompatibilities. For consistency, align these to the same major version (e.g., upgrade @typescript-eslint/eslint-plugin to ^8.x and rely on the meta typescript-eslint package for parser/plugin versions, or remove the redundant dependency).

Copilot · 2026-01-26T02:19:19Z

tailwind.config.ts

+          // picture 5 poistion
+          '89%': {
+            transform: 'translateY(0%)',
+            zIndex: '0',
+          },
+          // picture 5 poistion


The word "poistion" in these comments is misspelled and should be "position". Updating the spelling will keep the animation comments clear and consistent.

Suggested change

// picture 5 poistion

'89%': {

transform: 'translateY(0%)',

zIndex: '0',

},

// picture 5 poistion

// picture 5 position

'89%': {

transform: 'translateY(0%)',

zIndex: '0',

},

// picture 5 position

Copilot · 2026-01-26T02:19:20Z

app/(pages)/layout.tsx

 import fonts from './_globals/fonts';
 import Navbar from '@app/(pages)/_components/Navbar/Navbar';
 import Footer from '@app/(pages)/_components/Footer/Footer';
+import AboutUs from './about-us/page';


Rendering the AboutUs page component directly inside RootLayout means the About Us content (including CelebratePast) will be injected on every route, and on /about-us it will appear twice (once as children and once via this import). Layouts in the App Router are meant to wrap the active page via {children} only; consider removing this import/usage and letting the /about-us page render exclusively when that route is matched.

Copilot · 2026-01-26T02:19:20Z

app/(pages)/about-us/_components/CelebratePast/celebratePast.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import React from 'react';


React is imported but never used in this file, and with the automatic JSX runtime enabled it is not required. This will trigger the @typescript-eslint/no-unused-vars rule in .eslintrc.json; please remove the unused default import and keep only the useState/useEffect named imports.

Suggested change

import React from 'react';

phlangiee added 30 commits January 15, 2026 12:42

test

dde4b89

images for testing

5577e1b

pictures function

dbd0a07

switcting the pictures

859ae1c

words

e9ac384

pictures and button

f4954ae

imports

8f63e8e

scss

1797e81

packages?

8461186

Name changes

988620b

added another temp image

652d4e2

another image?

8650e4f

nope sorry this is the image

12cd816

from the techathon

3d831f5

what happened to the semicolon

08d604d

animation....

8bbb9bb

going back to lowercase for now

dc6bce4

fixed order and animation

70cb100

just in case i need my previous code (ill delete later)

41f8415

frog image :3

5689d53

YIPEEE POLISHED THE ANIMATION AND ENTIRE THING!!!

8da29bd

better animation

efabeba

shorter pictures func

261d42a

no picture for images over order 5

ba8f1c2

um i forgot but this is also apart of shotrer pictures

5330fc3

fixed beginning glitch when swapping orders?

a02d03d

changed key for pictures

20cb0eb

no italiac for button (i dont like it)

cd2a5b8

more rounded

928fc20

FIXED THE GLITCH IN THE LOOPING!!!

7fcb10b

Copilot started reviewing on behalf of phlangiee January 26, 2026 01:38 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

phlangiee requested review from Copilot and haylietan January 26, 2026 02:13

Copilot started reviewing on behalf of phlangiee January 26, 2026 02:13 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

haylietan added 4 commits February 1, 2026 00:09

Updated ESLint errors, fixed layout.tsx

f41d614

Update page.tsx

0706c1a

Update tailwind config

ca29a4d

Merge branch 'main' into come-celebrate-our-past

f4fc0d8

haylietan had a problem deploying to development February 1, 2026 19:44 — with GitHub Actions Failure

Fix dependencies

db73001

haylietan had a problem deploying to development February 1, 2026 20:02 — with GitHub Actions Failure

Build errors

f560506

haylietan temporarily deployed to development February 1, 2026 20:05 — with GitHub Actions Inactive

Working w. gltich

933e61f

haylietan had a problem deploying to development February 1, 2026 20:53 — with GitHub Actions Failure

Added placeholder images

7c1d2d0

haylietan had a problem deploying to development February 1, 2026 21:24 — with GitHub Actions Failure

haylietan added 2 commits February 1, 2026 22:35

Linting

e7f2eaa

Merge branch 'main' into come-celebrate-our-past

19d3346

haylietan temporarily deployed to development February 2, 2026 06:36 — with GitHub Actions Inactive

linting + errors

f9fce68

haylietan had a problem deploying to development February 2, 2026 06:41 — with GitHub Actions Failure

Update CarouselWindow.tsx

72f1bed

haylietan temporarily deployed to development February 2, 2026 07:03 — with GitHub Actions Inactive

Updated images

cb6f4a1

haylietan temporarily deployed to development February 3, 2026 01:26 — with GitHub Actions Inactive

haylietan merged commit 2a58565 into main Feb 3, 2026
2 checks passed

haylietan deleted the come-celebrate-our-past branch February 3, 2026 01:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CelebratePast#23

CelebratePast#23
haylietan merged 51 commits intomainfrom
come-celebrate-our-past

phlangiee commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -1,7 +1,9 @@
		import CelebratePast from './_components/CelebratePast/CelebratePast';

		{ path: '/realclouds.jpg', alt: 'amongsus' },
		{ path: '/frog.png', alt: 'among us!!!' },

Conversation

phlangiee commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants