Skip to content

added shadow and converted cqw to px and % #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
michelleyeoh merged 1 commit into from
Feb 7, 2026
Merged

added shadow and converted cqw to px and % #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 28 additions & 24 deletions app/(pages)/about-us/_components/CelebratePast/celebratePast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function Pictures({

const animClass =
order === 1
? 'animate-picture1 bg-[#BDC7D0]'
? 'animate-picture1 bg-[#DCE3EA]'
: order === 2
? 'animate-picture2 bg-[#BDC7D0]'
: order === 3
Expand All @@ -31,9 +31,9 @@ function Pictures({

return (
<div
className={`absolute left-1/2 top-1/2 will-change-transform flex justify-center items-center p-[0.8cqw] pb-[5cqw] ${animClass}`}
className={`absolute left-1/2 top-1/2 will-change-transform flex justify-center items-center p-[1.1vw] pb-[6vw] md:p-[0.6vw] md:pb-[4vw] rounded-[5px] shadow-[4px_4px_0_0_#A6BFC7] ${animClass}`}
>
<div className="w-[20cqw] h-[20cqw] sm:w-[18cqw] sm:h-[18cqw] relative overflow-hidden">
<div className="w-[25vw] h-[25vw] sm:w-[14vw] sm:h-[14vw] relative overflow-hidden">
<Image src={path} alt={alt} fill className="object-cover" />
</div>
</div>
Expand All @@ -42,17 +42,28 @@ function Pictures({

export default function CelebratePast() {
const [images, setImages] = useState<Img[]>([
{ path: '/Images/celebrateus/One.jpeg', alt: 'i like among us' },
{ path: '/Images/celebrateus/Two.jpg', alt: 'its pretty cool' },
{ path: '/Images/celebrateus/Three.jpg', alt: 'cheese is also cool' },
{ path: '/Images/celebrateus/Four.jpg', alt: 'amongsus' },
{ path: '/Images/celebrateus/Five.jpg', alt: 'among us!!!' },
{ path: '/Images/celebrateus/One.jpeg', alt: 'the goated three' },
{
path: '/Images/celebrateus/Two.jpg',
alt: 'hackdavis directors smiling for a photo',
},
{
path: '/Images/celebrateus/Three.jpg',
alt: 'close up of hackers looking at their computers',
},
{
path: '/Images/celebrateus/Four.jpg',
alt: 'ucd arc pavilion full of hackers',
},
{
path: '/Images/celebrateus/Five.jpg',
alt: 'two individuals posing next to hackdavis cow mascot',
},
]);

useEffect(() => {
// match this interval to your CSS animation duration
// match this interval to CSS animation duration
const DURATION_MS = 3000;

const id = window.setInterval(() => {
setImages((prev) => {
const [first, ...rest] = prev;
Expand All @@ -64,32 +75,25 @@ export default function CelebratePast() {
}, []);

return (
<div className="m-[10%] container-type-inline-size py-[5%] 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="m-[10%] py-[5%] rounded-[6vw] shadow-[1.5vw_1.5vw_0_0_#A6BFC7] outline outline-[2px] outline-[#A6BFC7] flex flex-col items-center bg-[#E5EEF1] place-content-center">
{/* text */}
<div className="flex flex-col items-center">
<div className="py-[0.5cqw] text-center">
<div className="py-[0.5vw] text-center">
<p className="text-2xl sm:text-4xl lg:text-5xl font-bold leading-none text-[#123041] text-center">
Come celebrate
<br className="md:hidden" /> our past with us!
</p>
</div>
{/* paragraph */}
<div className="py-[0.5cqw] text-center ">
<p
className="mt-2
text-[var(--text-dark)]
/80
leading-snug
text-[14px] sm:text-base lg:text-lg font-jakarta"
>
<div className="py-[0.5vw] text-center ">
<p className="mt-2 text-[var(--text-dark)] leading-snug text-[14px] sm:text-base lg:text-lg 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-[40cqw] relative flex items-center justify-center">
<div className="h-[45vw] md:h-[28vw] relative flex items-center justify-center">
{images.map((image, index) => (
<Pictures
// key={`${image.path}-${index}`}
Expand All @@ -101,13 +105,13 @@ export default function CelebratePast() {
))}
</div>

<button className="px-[3cqw] py-[1cqw] md:px-[1.5cqw] md:py-[.5cqw] rounded-full bg-[#123041] text-[#F9FBFC]">
<button className="px-[6%] py-[2%] md:px-[4%] md:py-[1%] rounded-full bg-[#123041] text-[#F9FBFC]">
<a
href="https://hackdavis-2025.devpost.com/project-gallery"
target="_blank"
rel="noopener noreferrer"
>
<p className="text-[3cqw] md:text-[1.3cqw] font-medium font-jakarta tracking-wide">
<p className="text-[3vw] md:text-[1.2vw] font-medium font-jakarta tracking-wide">
VIEW 2025 WINNERS
</p>
</a>
Expand Down