From 72b385301ac84160a0840d179f67d296e8907968 Mon Sep 17 00:00:00 2001 From: pranavvraja Date: Sun, 24 Nov 2024 23:40:04 +0530 Subject: [PATCH 01/12] update: performers --- src/components/widget/performers.tsx | 447 ++++++++++++++------------- 1 file changed, 239 insertions(+), 208 deletions(-) diff --git a/src/components/widget/performers.tsx b/src/components/widget/performers.tsx index c166a97..bc244a5 100644 --- a/src/components/widget/performers.tsx +++ b/src/components/widget/performers.tsx @@ -1,72 +1,82 @@ - "use client"; - - import React, { useEffect, useRef, useState, Suspense } from "react"; - import { gsap } from "gsap"; - import { ScrollTrigger } from "gsap/ScrollTrigger"; - import Lenis from "@studio-freight/lenis"; - import { useGSAP } from "@gsap/react"; - import { tedxsjecAssetsPrefix } from "@/lib/utils"; - import { Dialog, DialogContent } from "@/components/ui/dialog"; - import Image from "next/image"; - - gsap.registerPlugin(ScrollTrigger); - - interface PerformerSection { - images: string[]; - name: string; - profession: string; - description: string; - } - - const performerSections: PerformerSection[] = [ - { - name: "Yukthi Udupa", - profession: "Bharatanatyam artist", - description: - "Yukthi Udupa, a passionate Bharatanatyam artist, began her journey at 12 under Guru Vid Smt. Pravitha Ashok at Nritya Vasantha Natyalaya® Kundapura. She completed her exams with distinction and earned the Karnataka State Music and Dance Scholarship. Yukthi has won numerous awards, including and the excelling in international, national, and state-level competitions. Her Bharatanatyam Arangetram was a celebrated display of her technical skill and expressive artistry. Yukthi is also a 'B' grade Doordarshan artist, inspiring young dancers and honoring Bharatanatyam's legacy.", - images: [ - `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`, - `${tedxsjecAssetsPrefix}/performers/Yukthi 3.avif`, - ], - }, - { - name: "Agasthyam Kalaripayattu", - profession: "Martial Arts Institution", - description: - 'Agasthyam Kalaripayattu, a premier martial arts institution, preserves and teaches the ancient art of Kalaripayattu from Kerala, India. Founded and led by Gurukkal S Mahesh, Agasthyam carries forward a legacy over 129 years old, deeply rooted in traditional combat techniques, self-defense, weaponry, and spiritual growth. The renowned school offers rigorous training that builds agility, strength, and resilience, blending physical discipline with profound cultural heritage. Among its notable achievements is the "Shakthi" program, which has empowered nearly 12,000 women and continues to inspire and nurture many more.', - images: [ - `${tedxsjecAssetsPrefix}/performers/Agasthyam1.avif`, - `${tedxsjecAssetsPrefix}/performers/Agasthyam2.avif`, - `${tedxsjecAssetsPrefix}/performers/Agasthyam3.avif`, - ], - }, - ]; - - export default function Component() { - const containerRef = useRef(null); - const [currentImageIndices, setCurrentImageIndices] = useState( - performerSections.map(() => 0) - ); - const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([]); - const [selectedSection, setSelectedSection] = - useState(null); - const [isLargeScreen, setIsLargeScreen] = useState(false); - - useGSAP(() => { - const lenis = new Lenis({ lerp: 0.07 }); - - lenis.on("scroll", ScrollTrigger.update); - - gsap.ticker.add((time) => { - lenis.raf(time * 1000); - }); +"use client"; +import { useEffect, useRef, useState } from "react"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; +import Lenis from "@studio-freight/lenis"; +import { useGSAP } from "@gsap/react"; +import { tedxsjecAssetsPrefix } from "@/lib/utils"; +import { Dialog, DialogContent } from "@/components/ui/dialog"; +import Image from "next/image"; +gsap.registerPlugin(ScrollTrigger); - gsap.utils - .toArray(".img-container") - .forEach((container) => { - const img = container.querySelector("img"); +interface PerformerSection { + images: string[]; + name: string; + profession: string; + description: string; +} + +const performerSections: PerformerSection[] = [ + { + name: "Yukthi Udupa", + profession: "Bharatanatyam artist", + description: + "Yukthi Udupa, a passionate Bharatanatyam artist, began her journey at 12 under Guru Vid Smt. Pravitha Ashok at Nritya Vasantha Natyalaya® Kundapura. She completed her exams with distinction and earned the Karnataka State Music and Dance Scholarship. Yukthi has won numerous awards, including and the excelling in international, national, and state-level competitions. Her Bharatanatyam Arangetram was a celebrated display of her technical skill and expressive artistry. Yukthi is also a 'B' grade Doordarshan artist, inspiring young dancers and honoring Bharatanatyam's legacy.", + images: [ + `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`, + `${tedxsjecAssetsPrefix}/performers/Yukthi 3.avif`, + ], + }, + { + name: "Agasthyam Kalaripayattu", + profession: "Martial Arts Institution", + description: + 'Agasthyam Kalaripayattu, a premier martial arts institution, preserves and teaches the ancient art of Kalaripayattu from Kerala, India. Founded and led by Gurukkal S Mahesh, Agasthyam carries forward a legacy over 129 years old, deeply rooted in traditional combat techniques, self-defense, weaponry, and spiritual growth. The renowned school offers rigorous training that builds agility, strength, and resilience, blending physical discipline with profound cultural heritage. Among its notable achievements is the "Shakthi" program, which has empowered nearly 12,000 women and continues to inspire and nurture many more.', + images: [ + `${tedxsjecAssetsPrefix}/performers/Agasthyam1.avif`, + `${tedxsjecAssetsPrefix}/performers/Agasthyam2.avif`, + `${tedxsjecAssetsPrefix}/performers/Agasthyam3.avif`, + ], + }, + // , + // { + // name: "Munita Veigas Rao", + // profession: "Singer | Songwriter | Performer | Vocal Trainer", + // description: + // 'Munita Veigas Rao, fondly known as the "Nightingale of Mangalore," is an award-winning singer, songwriter, and vocal trainer celebrated for her dynamic performances across Konkani, regional, and Western music. Having been recently awarded the Dakshina Kannada District Rajyotsava Award in November 2024, Munita has a career spanning over two decades with more than 500 stage performances worldwide. As the founder of her music school, "Musically by Munita," she dedicates her time to nurturing new talent. Her exceptional vocal skills and commitment to music have made her a cherished figure in the community.', + // images: [ + // `${tedxsjecAssetsPrefix}/performers/Munita1.avif`, + // `${tedxsjecAssetsPrefix}/performers/Munita2.avif`, + // ], + // }, +]; + +export default function Component() { + const containerRef = useRef(null); + const [currentImageIndices, setCurrentImageIndices] = useState( + performerSections.map(() => 0) + ); + const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([]); + const [selectedSection, setSelectedSection] = + useState(null); + const [isLargeScreen, setIsLargeScreen] = useState(false); + + useGSAP(() => { + const lenis = new Lenis({ lerp: 0.07 }); + + lenis.on("scroll", ScrollTrigger.update); + + gsap.ticker.add((time) => { + lenis.raf(time * 1000); + }); + + gsap.utils + .toArray(".img-container") + .forEach((container) => { + const images = container.querySelectorAll("img"); - if (img) { + if (images.length) { + images.forEach((img) => { gsap.fromTo( img, { yPercent: -10 }, @@ -78,164 +88,185 @@ scrub: true, start: "top bottom", end: "bottom top", + onUpdate: (self) => { + images.forEach((image) => { + const isVisible = image.classList.contains("opacity-100"); + if (isVisible) { + gsap.set(image, { yPercent: self.progress * 20 - 10 }); + } + }); + }, }, } ); - } - }); + }); + } + }); - const mm = gsap.matchMedia(); + // Set up hover animations for description on desktop + const mm = gsap.matchMedia(); - mm.add("(min-width: 1200px)", () => { - setIsLargeScreen(true); - gsap.utils - .toArray(".performer-section") - .forEach((section) => { - const description = section.querySelector(".description"); - const tl = gsap.timeline({ paused: true }); + mm.add("(min-width: 1200px)", () => { + setIsLargeScreen(true); + gsap.utils + .toArray(".performer-section") + .forEach((section) => { + const description = section.querySelector(".description"); + const tl = gsap.timeline({ paused: true }); + mm.add("(min-width: 1200px)", () => { + setIsLargeScreen(true); + gsap.utils + .toArray(".performer-section") + .forEach((section) => { + const description = section.querySelector(".description"); + const tl = gsap.timeline({ paused: true }); - tl.fromTo( - description, - { yPercent: 100, opacity: 0 }, - { yPercent: 0, opacity: 1, duration: 0.3, ease: "power2.out" } - ); + tl.fromTo( + description, + { yPercent: 100, opacity: 0 }, + { yPercent: 0, opacity: 1, duration: 0.5, ease: "power2.out" } + ); - section.addEventListener("mouseenter", () => tl.play()); - section.addEventListener("mouseleave", () => tl.reverse()); + section.addEventListener("mouseenter", () => tl.play()); + section.addEventListener("mouseleave", () => tl.reverse()); + }); }); - }); + section.addEventListener("mouseenter", () => tl.play()); + section.addEventListener("mouseleave", () => tl.reverse()); + }); + }); - mm.add("(max-width: 1199px)", () => { - setIsLargeScreen(false); - }); + mm.add("(max-width: 1200px)", () => { + setIsLargeScreen(false); + }); + mm.add("(max-width: 1200px)", () => { + setIsLargeScreen(false); + }); - return () => { - lenis.destroy(); - ScrollTrigger.getAll().forEach((st) => st.kill()); - mm.revert(); - }; - }, []); - - useEffect(() => { - performerSections.forEach((_, index) => { - intervalRefs.current[index] = setInterval(() => { - setCurrentImageIndices((prevIndices) => { - const newIndices = [...prevIndices]; - newIndices[index] = - (newIndices[index] + 1) % performerSections[index].images.length; - return newIndices; - }); - }, 2500 + index * 1000); - }); + return () => { + lenis.destroy(); + ScrollTrigger.getAll().forEach((st) => st.kill()); + mm.revert(); + }; + }, []); - return () => { - intervalRefs.current.forEach((interval) => { - if (interval) clearInterval(interval); + useEffect(() => { + performerSections.forEach((_, index) => { + intervalRefs.current[index] = setInterval(() => { + setCurrentImageIndices((prevIndices) => { + const newIndices = [...prevIndices]; + newIndices[index] = + (newIndices[index] + 1) % performerSections[index].images.length; + return newIndices; }); - }; - }, []); + }, 2500 + index * 1000); + }); - const handleSectionClick = (section: PerformerSection) => { - if (!isLargeScreen) { - setSelectedSection(section); - } + return () => { + intervalRefs.current.forEach((interval) => { + if (interval) clearInterval(interval); + }); }; + }, []); + + const handleSectionClick = (section: PerformerSection) => { + if (!isLargeScreen) { + setSelectedSection(section); + } + }; + + // Effect to disable body scroll when dialog is open + useEffect(() => { + if (selectedSection) { + document.body.classList.add("no-scroll"); + } else { + document.body.classList.remove("no-scroll"); + } + + return () => document.body.classList.remove("no-scroll"); + }, [selectedSection]); - useEffect(() => { - if (selectedSection) { - document.body.classList.add("no-scroll"); - } else { - document.body.classList.remove("no-scroll"); - } - - return () => document.body.classList.remove("no-scroll"); - }, [selectedSection]); - - return ( - !open && setSelectedSection(null)} - > -
- {performerSections.map((section, sectionIndex) => ( -
!open && setSelectedSection(null)} + > +
+ {performerSections.map((section, sectionIndex) => ( +
+
handleSectionClick(section)} > -
handleSectionClick(section)} - > - {section.images.map((image, imageIndex) => ( -
}> - {`Performer - - ))} -
-

- {section.name} -

-

- {section.profession} -

-
-
-

- {section.description} -

-
-
-
- ))} -
- {!isLargeScreen && selectedSection && ( - -
-
-
}> - {`${selectedSection.name} - -
-
-

- {selectedSection.name} + {section.images.map((image, imageIndex) => ( + {`Performer + ))} +
+

+ {section.name}

-

- {selectedSection.profession} +

+ {section.profession} +

+
+
+

+ {section.description}

-

{selectedSection.description}

- - )} -
- ); - } - + + ))} + + {!isLargeScreen && selectedSection && ( + +
+
+ {`${selectedSection.name} +
+
+

+ {selectedSection.name} +

+

+ {selectedSection.profession} +

+

{selectedSection.description}

+
+
+ + )} + + ); +} From e500c37a901fbd6bfd6c83d78c9b46c6d5119efa Mon Sep 17 00:00:00 2001 From: pranavvraja Date: Mon, 25 Nov 2024 12:30:28 +0530 Subject: [PATCH 02/12] add&refactor: performers suspense, refactored types --- src/components/widget/performers.tsx | 138 ++++++++-------- src/constants/index.ts | 230 +++++++++++++++++++-------- src/types/index.ts | 12 ++ 3 files changed, 252 insertions(+), 128 deletions(-) diff --git a/src/components/widget/performers.tsx b/src/components/widget/performers.tsx index bc244a5..b85030a 100644 --- a/src/components/widget/performers.tsx +++ b/src/components/widget/performers.tsx @@ -1,5 +1,5 @@ "use client"; -import { useEffect, useRef, useState } from "react"; +import { Suspense, useEffect, useRef, useState } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Lenis from "@studio-freight/lenis"; @@ -7,54 +7,72 @@ import { useGSAP } from "@gsap/react"; import { tedxsjecAssetsPrefix } from "@/lib/utils"; import { Dialog, DialogContent } from "@/components/ui/dialog"; import Image from "next/image"; +import { performers } from "@/constants"; +import { PerformerSection } from "@/types"; gsap.registerPlugin(ScrollTrigger); -interface PerformerSection { - images: string[]; - name: string; - profession: string; - description: string; -} +const ImagePlaceholder: React.FC = () => ( +
+ + Loading... +
+); + +const DelayedImage: React.FC<{ + src: string; + alt: string; + sectionIndex: number; + imageIndex: number; + section: PerformerSection; + currentImageIndices: number[]; +}> = ({ src, alt, sectionIndex, imageIndex, section, currentImageIndices }) => { + const [isLoaded, setIsLoaded] = useState(false); -const performerSections: PerformerSection[] = [ - { - name: "Yukthi Udupa", - profession: "Bharatanatyam artist", - description: - "Yukthi Udupa, a passionate Bharatanatyam artist, began her journey at 12 under Guru Vid Smt. Pravitha Ashok at Nritya Vasantha Natyalaya® Kundapura. She completed her exams with distinction and earned the Karnataka State Music and Dance Scholarship. Yukthi has won numerous awards, including and the excelling in international, national, and state-level competitions. Her Bharatanatyam Arangetram was a celebrated display of her technical skill and expressive artistry. Yukthi is also a 'B' grade Doordarshan artist, inspiring young dancers and honoring Bharatanatyam's legacy.", - images: [ - `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`, - `${tedxsjecAssetsPrefix}/performers/Yukthi 3.avif`, - ], - }, - { - name: "Agasthyam Kalaripayattu", - profession: "Martial Arts Institution", - description: - 'Agasthyam Kalaripayattu, a premier martial arts institution, preserves and teaches the ancient art of Kalaripayattu from Kerala, India. Founded and led by Gurukkal S Mahesh, Agasthyam carries forward a legacy over 129 years old, deeply rooted in traditional combat techniques, self-defense, weaponry, and spiritual growth. The renowned school offers rigorous training that builds agility, strength, and resilience, blending physical discipline with profound cultural heritage. Among its notable achievements is the "Shakthi" program, which has empowered nearly 12,000 women and continues to inspire and nurture many more.', - images: [ - `${tedxsjecAssetsPrefix}/performers/Agasthyam1.avif`, - `${tedxsjecAssetsPrefix}/performers/Agasthyam2.avif`, - `${tedxsjecAssetsPrefix}/performers/Agasthyam3.avif`, - ], - }, - // , - // { - // name: "Munita Veigas Rao", - // profession: "Singer | Songwriter | Performer | Vocal Trainer", - // description: - // 'Munita Veigas Rao, fondly known as the "Nightingale of Mangalore," is an award-winning singer, songwriter, and vocal trainer celebrated for her dynamic performances across Konkani, regional, and Western music. Having been recently awarded the Dakshina Kannada District Rajyotsava Award in November 2024, Munita has a career spanning over two decades with more than 500 stage performances worldwide. As the founder of her music school, "Musically by Munita," she dedicates her time to nurturing new talent. Her exceptional vocal skills and commitment to music have made her a cherished figure in the community.', - // images: [ - // `${tedxsjecAssetsPrefix}/performers/Munita1.avif`, - // `${tedxsjecAssetsPrefix}/performers/Munita2.avif`, - // ], - // }, -]; + useEffect(() => { + const timer = setTimeout(() => { + setIsLoaded(true); + }); // 2-second delay + return () => clearTimeout(timer); + }, []); + + if (!isLoaded) { + return ; + } + + return ( + {`Performer + ); +}; export default function Component() { const containerRef = useRef(null); const [currentImageIndices, setCurrentImageIndices] = useState( - performerSections.map(() => 0) + performers.map(() => 0) ); const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([]); const [selectedSection, setSelectedSection] = @@ -151,12 +169,12 @@ export default function Component() { }, []); useEffect(() => { - performerSections.forEach((_, index) => { + performers.forEach((_, index) => { intervalRefs.current[index] = setInterval(() => { setCurrentImageIndices((prevIndices) => { const newIndices = [...prevIndices]; newIndices[index] = - (newIndices[index] + 1) % performerSections[index].images.length; + (newIndices[index] + 1) % performers[index].images.length; return newIndices; }); }, 2500 + index * 1000); @@ -192,7 +210,7 @@ export default function Component() { onOpenChange={(open) => !open && setSelectedSection(null)} >
- {performerSections.map((section, sectionIndex) => ( + {performers.map((section, sectionIndex) => (
handleSectionClick(section)} > - {section.images.map((image, imageIndex) => ( - {`Performer - ))} + }> + {section.images.map((image, imageIndex) => ( + + ))} +

Date: Mon, 25 Nov 2024 13:49:59 +0530 Subject: [PATCH 03/12] refactor: jpg to webp --- src/constants/index.ts | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/constants/index.ts b/src/constants/index.ts index 6bb278e..b2e6eed 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -107,65 +107,64 @@ export const performers: PerformerSection[] = [ // ], // }, ]; - export const prevEdition22: PreviousEdition[] = [ { id: 1, - img: `${tedxsjecAssetsPrefix}/prev/2022/image1.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2022/image1.webp`, }, { id: 2, - img: `${tedxsjecAssetsPrefix}/prev/2022/image2.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2022/image2.webp`, }, { id: 3, - img: `${tedxsjecAssetsPrefix}/prev/2022/image3.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2022/image3.webp`, }, { id: 4, - img: `${tedxsjecAssetsPrefix}/prev/2022/image4.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2022/image4.webp`, }, { id: 5, - img: `${tedxsjecAssetsPrefix}/prev/2022/image5.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2022/image5.webp`, }, { id: 6, - img: `${tedxsjecAssetsPrefix}/prev/2022/image6.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2022/image6.webp`, }, { id: 7, - img: `${tedxsjecAssetsPrefix}/prev/2022/image7.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2022/image7.webp`, }, ]; export const prevEdition20: PreviousEdition[] = [ { id: 1, - img: `${tedxsjecAssetsPrefix}/prev/2022/image1.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2020/image1.webp`, }, { id: 2, - img: `${tedxsjecAssetsPrefix}/prev/2022/image2.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2020/image2.webp`, }, { id: 3, - img: `${tedxsjecAssetsPrefix}/prev/2022/image3.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2020/image3.webp`, }, { id: 4, - img: `${tedxsjecAssetsPrefix}/prev/2022/image4.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2020/image4.webp`, }, { id: 5, - img: `${tedxsjecAssetsPrefix}/prev/2022/image5.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2020/image5.webp`, }, { id: 6, - img: `${tedxsjecAssetsPrefix}/prev/2022/image6.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2020/image6.webp`, }, { id: 7, - img: `${tedxsjecAssetsPrefix}/prev/2022/image7.jpg`, + img: `${tedxsjecAssetsPrefix}/prev/2020/image7.webp`, }, ]; From f08075872818329c24ab8e380626c0b88411b953 Mon Sep 17 00:00:00 2001 From: pranavvraja Date: Mon, 25 Nov 2024 13:50:24 +0530 Subject: [PATCH 04/12] add: previous edition page --- src/app/previous-editions/page.tsx | 17 +++++++ src/components/common/gridsplash.tsx | 67 ++++++++++++++++++---------- 2 files changed, 61 insertions(+), 23 deletions(-) create mode 100644 src/app/previous-editions/page.tsx diff --git a/src/app/previous-editions/page.tsx b/src/app/previous-editions/page.tsx new file mode 100644 index 0000000..a06eeb9 --- /dev/null +++ b/src/app/previous-editions/page.tsx @@ -0,0 +1,17 @@ +import UnsplashGrid from "@/components/common/gridsplash"; +import React from "react"; + +type Props = {}; + +const previous = (props: Props) => { + return ( +
+

2022 Edition

+ +

2020 Edition

+ +
+ ); +}; + +export default previous; diff --git a/src/components/common/gridsplash.tsx b/src/components/common/gridsplash.tsx index f672d5c..883aac0 100644 --- a/src/components/common/gridsplash.tsx +++ b/src/components/common/gridsplash.tsx @@ -5,42 +5,63 @@ import Image from "next/image"; import { X } from "lucide-react"; import { tedxsjecAssetsPrefix } from "@/lib/utils"; import { speakers } from "@/constants"; +import { prevEdition22, prevEdition20 } from "@/constants"; -function UnsplashGrid() { +type UnsplashGridProps = { + year: number; +}; + +function UnsplashGrid(props: UnsplashGridProps) { const [selected, setSelected] = useState(null); return ( <> -
-
-
- <> - {speakers.map((speaker, index) => ( - - ))} - + {props.year === 2022 ? ( +
+
+
+ <> + {prevEdition22.map((img, index) => ( + + ))} + +
+
+
+ ) : ( +
+
+
+ <> + {prevEdition20.map((img, index) => ( + + ))} + +
-
+ )} ); } -interface Speaker { +interface PreviousEdition { id: number; img: string; - name: string; - profession: string; - description: string; } interface ImageItemProps { - item: Speaker; + item: PreviousEdition; index: number | string; setSelected: any; } @@ -68,7 +89,7 @@ function ImageItem({ item, index, setSelected }: ImageItemProps) { } interface ModalProps { - selected: Speaker | null; + selected: PreviousEdition | null; setSelected: any; } @@ -139,10 +160,10 @@ function Modal({ selected, setSelected }: ModalProps) { variants={itemVariants} className="text-2xl font-bold mb-2" > - {selected.name} + {/* {selected.name} */} - {selected.description} + {/* {selected.description} */} From 233ed587a894f6e16840b1f83888243c354841f6 Mon Sep 17 00:00:00 2001 From: pranavvraja Date: Mon, 25 Nov 2024 13:50:46 +0530 Subject: [PATCH 05/12] add: prev edition section button --- src/components/common/container-scroll.tsx | 1 + src/components/ui/container-scroll-animation.tsx | 16 +++++++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/common/container-scroll.tsx b/src/components/common/container-scroll.tsx index 1a60434..3a3c740 100644 --- a/src/components/common/container-scroll.tsx +++ b/src/components/common/container-scroll.tsx @@ -21,6 +21,7 @@ export function PreviousEdition() { width="100%" height="450" src="https://www.youtube.com/embed/NCWwTsAjiys?si=xBkmPtQEYQl_tEIX" + className="md:h-[450px] h-[200px]" >
diff --git a/src/components/ui/container-scroll-animation.tsx b/src/components/ui/container-scroll-animation.tsx index ab362a2..3fb8a9c 100644 --- a/src/components/ui/container-scroll-animation.tsx +++ b/src/components/ui/container-scroll-animation.tsx @@ -1,6 +1,8 @@ "use client"; import React, { useRef } from "react"; import { useScroll, useTransform, motion, MotionValue } from "framer-motion"; +import Link from "next/link"; +import { Button } from "./button"; export const ContainerScroll = ({ titleComponent, @@ -36,11 +38,11 @@ export const ContainerScroll = ({ return (
{children} + + +
); @@ -85,7 +95,7 @@ export const Card = ({ boxShadow: "2px 2px #0000004d, 4px 2px 5px #0000004a, 9px 9px 9px #00000042, 12px 21px 12px #00000026, 15px 37px 15px #0000000a, 17px 58px 17px #00000003", }} - className="max-w-5xl -mt-12 lg:mb-10 mb-5 lg:mt-0 mx-auto h-fit w-full border-[#6C6C6C] p-2 md:p-4 bg-[#222222] rounded-[16px] shadow-2xl" + className="max-w-5xl -mt-14 lg:mb-10 mb-5 lg:mt-0 mx-auto md:h-fit h-[200px] w-full border-[#6C6C6C] p-2 md:p-4 bg-[#222222] rounded-[16px] shadow-2xl" >
{children} From adbfb33d542059ff3ec1b8ef5db3971ab2407687 Mon Sep 17 00:00:00 2001 From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com> Date: Mon, 25 Nov 2024 19:35:14 +0530 Subject: [PATCH 06/12] style: added gradient to the header text --- src/components/widget/hero.tsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/components/widget/hero.tsx b/src/components/widget/hero.tsx index a49ca93..6e0d0da 100644 --- a/src/components/widget/hero.tsx +++ b/src/components/widget/hero.tsx @@ -121,7 +121,10 @@ export default function HeroHighlight() {
-

+ {/*

+ Ideas Worth Spreading +

*/} +

Ideas Worth Spreading

@@ -131,16 +134,16 @@ export default function HeroHighlight() {

-
- - - -
+
+ + + +
From 6c34ad65c076d650dfc6d4aa79c66e795a9c2e80 Mon Sep 17 00:00:00 2001 From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com> Date: Mon, 25 Nov 2024 19:47:24 +0530 Subject: [PATCH 07/12] style: changed the gradient and responsiveness --- src/components/common/speakers.tsx | 2 +- src/components/widget/hero.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/common/speakers.tsx b/src/components/common/speakers.tsx index 03ec8d5..81b3d95 100644 --- a/src/components/common/speakers.tsx +++ b/src/components/common/speakers.tsx @@ -19,7 +19,7 @@ export default function Component() { duration: 1, scrollTrigger: { trigger: `.speaker-${index}`, - start: "top 90%", // Adjust this to control when the animation starts + start: "top 92%", // Adjust this to control when the animation starts toggleActions: "play none none reverse", // Animation behavior }, }); diff --git a/src/components/widget/hero.tsx b/src/components/widget/hero.tsx index 6e0d0da..aa181e4 100644 --- a/src/components/widget/hero.tsx +++ b/src/components/widget/hero.tsx @@ -124,7 +124,12 @@ export default function HeroHighlight() { {/*

Ideas Worth Spreading

*/} -

+

Ideas Worth Spreading

From 0ae6d0f6f9b69c2f3a32f721795192f129ede560 Mon Sep 17 00:00:00 2001 From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com> Date: Mon, 25 Nov 2024 21:32:25 +0530 Subject: [PATCH 08/12] refactor: move targetDate initialization inside useEffect and optimize cleanup logic --- src/components/widget/hero.tsx | 5 ++--- src/components/widget/performers.tsx | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/widget/hero.tsx b/src/components/widget/hero.tsx index aa181e4..785d7db 100644 --- a/src/components/widget/hero.tsx +++ b/src/components/widget/hero.tsx @@ -66,14 +66,13 @@ export default function HeroHighlight() { seconds: 0, }); const svgRef = useRef(null); - const targetDate = new Date("2024-12-14"); const { scrollYProgress } = useScroll(); const pathLength = useTransform(scrollYProgress, [0, 0.8], [0, 1]); useEffect(() => { setIsLoaded(true); - + const targetDate = new Date("2024-12-14"); const intervalId = setInterval(() => { const now = new Date(); const difference = targetDate.getTime() - now.getTime(); @@ -92,7 +91,7 @@ export default function HeroHighlight() { }, 1000); return () => clearInterval(intervalId); - }, [targetDate]); + }, []); const timeUnits: (keyof TimeLeft)[] = ["days", "hours", "minutes", "seconds"]; diff --git a/src/components/widget/performers.tsx b/src/components/widget/performers.tsx index c166a97..cef524a 100644 --- a/src/components/widget/performers.tsx +++ b/src/components/widget/performers.tsx @@ -127,9 +127,9 @@ }); }, 2500 + index * 1000); }); - + const currentInterval = intervalRefs.current; return () => { - intervalRefs.current.forEach((interval) => { + currentInterval.forEach((interval) => { if (interval) clearInterval(interval); }); }; From a8d0f40e922a4b4eb5db7216b9c84282dbdc4eb3 Mon Sep 17 00:00:00 2001 From: pranavvraja Date: Tue, 26 Nov 2024 13:45:09 +0530 Subject: [PATCH 09/12] update: performers --- src/components/common/gridsplash.tsx | 2 +- src/constants/index.ts | 31 ++++++++++++++++++---------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/common/gridsplash.tsx b/src/components/common/gridsplash.tsx index 883aac0..3ca26b0 100644 --- a/src/components/common/gridsplash.tsx +++ b/src/components/common/gridsplash.tsx @@ -37,7 +37,7 @@ function UnsplashGrid(props: UnsplashGridProps) {
- <> + <> {prevEdition20.map((img, index) => ( Date: Tue, 26 Nov 2024 19:29:58 +0530 Subject: [PATCH 10/12] update: back button in prev-edition page --- src/app/previous-editions/page.tsx | 31 +++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/src/app/previous-editions/page.tsx b/src/app/previous-editions/page.tsx index a06eeb9..0b6adf4 100644 --- a/src/app/previous-editions/page.tsx +++ b/src/app/previous-editions/page.tsx @@ -1,11 +1,36 @@ +"use client"; import UnsplashGrid from "@/components/common/gridsplash"; +import { useRouter } from "next/navigation"; import React from "react"; type Props = {}; -const previous = (props: Props) => { +const Previous = (props: Props) => { + const router = useRouter(); return ( -
+
+
+ +

2022 Edition

2020 Edition

@@ -14,4 +39,4 @@ const previous = (props: Props) => { ); }; -export default previous; +export default Previous; From 2c450cfd2e91786bb67cee5a7acb50415e8dcb12 Mon Sep 17 00:00:00 2001 From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com> Date: Tue, 26 Nov 2024 19:55:08 +0530 Subject: [PATCH 11/12] removed usn field --- src/components/common/registration-form.tsx | 8 ++++---- .../common/searchable-infinite-scroll-table.tsx | 2 +- src/utils/zod-schemas.ts | 6 ------ 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/components/common/registration-form.tsx b/src/components/common/registration-form.tsx index c3e49dc..c8c698b 100644 --- a/src/components/common/registration-form.tsx +++ b/src/components/common/registration-form.tsx @@ -293,7 +293,7 @@ export default function RegistrationForm() { } return ( - +