From bcccfdc51a753f83603cec7dc3a9c96f985e003a Mon Sep 17 00:00:00 2001 From: Animeshdj Date: Wed, 16 Oct 2024 23:25:10 +0530 Subject: [PATCH 1/9] style: events images brightness removed --- app/events/[categoryname]/categories.module.scss | 1 - app/events/[categoryname]/page.tsx | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss index 3c17356..945241a 100644 --- a/app/events/[categoryname]/categories.module.scss +++ b/app/events/[categoryname]/categories.module.scss @@ -335,7 +335,6 @@ .eventImage { width: 100%; height: 100%; - filter: brightness(200%); user-select: none; box-shadow: 0px 0px 20px 4px #cbae5780; background-color: #110e16; diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx index 8914241..d817973 100644 --- a/app/events/[categoryname]/page.tsx +++ b/app/events/[categoryname]/page.tsx @@ -204,7 +204,11 @@ export default function Page({ params }: { params: { categoryname: string } }) {
Date: Wed, 16 Oct 2024 23:31:41 +0530 Subject: [PATCH 2/9] fix: ham size --- components/Landing/Navbar/HamBtn/Btn.tsx | 4 +- .../Landing/Navbar/HamBtn/btn.module.scss | 2 +- components/MobileLanding/Artist/Artist.tsx | 72 +++++++++++++------ 3 files changed, 53 insertions(+), 25 deletions(-) diff --git a/components/Landing/Navbar/HamBtn/Btn.tsx b/components/Landing/Navbar/HamBtn/Btn.tsx index 0289872..844548f 100644 --- a/components/Landing/Navbar/HamBtn/Btn.tsx +++ b/components/Landing/Navbar/HamBtn/Btn.tsx @@ -46,7 +46,7 @@ export default function HamBtn() { ? 1 : window.innerWidth > 900 ? 0.8 - : 0.65, + : 0.7, }) .to( pokerChipRef.current, @@ -102,7 +102,7 @@ export default function HamBtn() { y: "0", x: "0", duration: 0.5, - scale: 1, + scale: 0.7, }) .to( pokerChipRef.current, diff --git a/components/Landing/Navbar/HamBtn/btn.module.scss b/components/Landing/Navbar/HamBtn/btn.module.scss index 8371cfb..b210a70 100644 --- a/components/Landing/Navbar/HamBtn/btn.module.scss +++ b/components/Landing/Navbar/HamBtn/btn.module.scss @@ -86,7 +86,7 @@ } @media (width <= 900px) { - transform: scale(0.55); + transform: scale(0.7); } // @media (width <= 585px) { diff --git a/components/MobileLanding/Artist/Artist.tsx b/components/MobileLanding/Artist/Artist.tsx index 0762a85..020652e 100644 --- a/components/MobileLanding/Artist/Artist.tsx +++ b/components/MobileLanding/Artist/Artist.tsx @@ -1,27 +1,55 @@ -import styles from './artist.module.scss' -import {StaticImport} from "next/dist/shared/lib/get-img-props"; +"use client"; +import React, { useEffect, useRef } from "react"; +import styles from "./artist.module.scss"; +import { StaticImport } from "next/dist/shared/lib/get-img-props"; import Image from "next/image"; +import gsap from "gsap"; +import { useGSAP } from "@gsap/react"; +import ScrollTrigger from "gsap/dist/ScrollTrigger"; + +gsap.registerPlugin(ScrollTrigger); interface Props { - reverse: boolean; - image: string | StaticImport; - name: string; - date: number; + reverse: boolean; + image: string | StaticImport; + name: string; + date: number; } -export default function Artist({reverse, image, name, date}: Props) { - return ( -
-
- {name} -
-
-

{name}

-

{`October ${date}`}

-
-
- ) -} \ No newline at end of file +export default function Artist({ reverse, image, name, date }: Props) { + + return ( +
+
+ {name} +
+
+

+ {name} +

+

{`October ${date}`}

+
+
+ ); +} From 74083afcf76c8d232fa984c24eca0475785ae4f6 Mon Sep 17 00:00:00 2001 From: Samyak Jain Date: Wed, 16 Oct 2024 23:33:08 +0530 Subject: [PATCH 3/9] fix --- components/MobileLanding/Artist/Artist.tsx | 23 ---------------------- 1 file changed, 23 deletions(-) diff --git a/components/MobileLanding/Artist/Artist.tsx b/components/MobileLanding/Artist/Artist.tsx index 86ef586..4a6da92 100644 --- a/components/MobileLanding/Artist/Artist.tsx +++ b/components/MobileLanding/Artist/Artist.tsx @@ -1,32 +1,13 @@ -<<<<<<< HEAD -"use client"; -import React, { useEffect, useRef } from "react"; -import styles from "./artist.module.scss"; -import { StaticImport } from "next/dist/shared/lib/get-img-props"; -import Image from "next/image"; -import gsap from "gsap"; -import { useGSAP } from "@gsap/react"; -import ScrollTrigger from "gsap/dist/ScrollTrigger"; - -gsap.registerPlugin(ScrollTrigger); -======= import styles from "./artist.module.scss"; import { StaticImport } from "next/dist/shared/lib/get-img-props"; import Image from "next/image"; import MusicSection from "./MusicButtons/MusicButton"; ->>>>>>> fb08c9c0a591e4f2329c3b5d4f7819009da5124a interface Props { reverse: boolean; image: string | StaticImport; name: string; date: number; -<<<<<<< HEAD -} - -export default function Artist({ reverse, image, name, date }: Props) { - -======= music: string; artist: string; spotifyUrl: string; @@ -41,7 +22,6 @@ export default function Artist({ artist, spotifyUrl, }: Props) { ->>>>>>> fb08c9c0a591e4f2329c3b5d4f7819009da5124a return (

{`October ${date}`}

-<<<<<<< HEAD -======= ->>>>>>> fb08c9c0a591e4f2329c3b5d4f7819009da5124a
); From 0e5c706183aa7edd11701a81e85504f8edd55494 Mon Sep 17 00:00:00 2001 From: Animeshdj Date: Wed, 16 Oct 2024 23:35:27 +0530 Subject: [PATCH 4/9] fix: hopefully preloading images (shows) --- app/shows/page.tsx | 243 ++++++++++++++++++++++++--------------------- 1 file changed, 130 insertions(+), 113 deletions(-) diff --git a/app/shows/page.tsx b/app/shows/page.tsx index ced54ac..c9745f4 100644 --- a/app/shows/page.tsx +++ b/app/shows/page.tsx @@ -11,6 +11,7 @@ import tyd from "@/public/ProfShow/theyellowdiaries.png"; import gif1 from "@/public/ProfShow/gif1.gif"; import { useRouter } from "next/navigation"; import CursorEffect from "@/components/CursorEffect/CursorEffect"; +import Preloader from "@/components/Preloader/Preloader"; const eventDetails = [ { @@ -49,6 +50,7 @@ const Shows = () => { const [eventID, setEventID] = useState(0); const [progressKey, setProgressKey] = useState(0); + const [loading, setLoading] = useState(true); const eventNameRef = useRef(null); const eventDateRef = useRef(null); @@ -89,6 +91,29 @@ const Shows = () => { ); }; + const eventImages = eventDetails.map((event, index) => ( +
+ {event.name} +
+ )); + + useEffect(() => { + const timer = setTimeout(() => { + setLoading(false); + }, 2000); + + return () => clearTimeout(timer); + }, []); + useEffect(() => { const timer = setTimeout(() => { animate(); @@ -136,122 +161,114 @@ const Shows = () => { return ( <> - {/* */} - -
- grunge effect -
- - - - - -
- gif -
-
-
- {eventDetails[eventID].name.split(" ").slice(0, -1).join(" ")} -
- {eventDetails[eventID].name.split(" ").slice(-1)} -
- {eventDetails[eventID].date} -
-
- {eventDetails.map((event, index) => ( -
- {event.name} -
- ))} -
- handleArrowClick("left")} - > - - - - - -
- {eventDetails[eventID].title} + {loading ? ( + + ) : ( + <> + +
+ grunge effect +
+ + + + +
- handleArrowClick("right")} - > - - - - - -
-
+ gif +
+
+
+ {eventDetails[eventID].name.split(" ").slice(0, -1).join(" ")} +
+ {eventDetails[eventID].name.split(" ").slice(-1)} +
+ {eventDetails[eventID].date} +
+
+ {eventImages} +
+ handleArrowClick("left")} + > + + + + + +
+ {eventDetails[eventID].title} +
+ handleArrowClick("right")} + > + + + + + +
+
+
+
-
-
+ + )} ); }; From d37ae548c8adc08d58455af786b7dacb2440dd33 Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Wed, 16 Oct 2024 23:40:49 +0530 Subject: [PATCH 5/9] feat: added animations on prof shows section --- components/MobileLanding/Artist/Artist.tsx | 37 +++++++++++++++++++ .../Artist/MusicButtons/music.module.scss | 3 +- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/components/MobileLanding/Artist/Artist.tsx b/components/MobileLanding/Artist/Artist.tsx index 4a6da92..6b456ba 100644 --- a/components/MobileLanding/Artist/Artist.tsx +++ b/components/MobileLanding/Artist/Artist.tsx @@ -2,6 +2,10 @@ import styles from "./artist.module.scss"; import { StaticImport } from "next/dist/shared/lib/get-img-props"; import Image from "next/image"; import MusicSection from "./MusicButtons/MusicButton"; +import { useGSAP } from "@gsap/react"; +import { useRef } from "react"; +import gsap from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; interface Props { reverse: boolean; @@ -13,6 +17,8 @@ interface Props { spotifyUrl: string; } +gsap.registerPlugin(ScrollTrigger); + export default function Artist({ reverse, image, @@ -22,9 +28,40 @@ export default function Artist({ artist, spotifyUrl, }: Props) { + const artistRef: any = useRef(null); + useGSAP( + () => { + const tl = gsap.timeline({ + scrollTrigger: { + trigger: artistRef.current, + markers: false, + toggleActions: "play none none none", + start: "top 70%", + }, + }); + + console.log(artistRef.current); + console.dir(artistRef.current); + + tl.from(artistRef.current.children[0], { + xPercent: reverse ? 250 : -250, + duration: 0.5, + }).from( + artistRef.current.children[1].children, + { + xPercent: reverse ? -250 : 250, + duration: 0.5, + stagger: 0.2, + }, + "-=0.25" + ); + }, + { dependencies: [] } + ); return (
Date: Wed, 16 Oct 2024 23:44:41 +0530 Subject: [PATCH 6/9] feat: removed stagger --- components/MobileLanding/Artist/Artist.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/MobileLanding/Artist/Artist.tsx b/components/MobileLanding/Artist/Artist.tsx index 6b456ba..3d9467a 100644 --- a/components/MobileLanding/Artist/Artist.tsx +++ b/components/MobileLanding/Artist/Artist.tsx @@ -47,11 +47,12 @@ export default function Artist({ xPercent: reverse ? 250 : -250, duration: 0.5, }).from( - artistRef.current.children[1].children, + // artistRef.current.children[1].children, + artistRef.current.children[1], { xPercent: reverse ? -250 : 250, duration: 0.5, - stagger: 0.2, + // stagger: 0.2, }, "-=0.25" ); From 0549816c08bea557581ed79066fa9c95ba672e1a Mon Sep 17 00:00:00 2001 From: Samyak Jain Date: Thu, 17 Oct 2024 00:20:29 +0530 Subject: [PATCH 7/9] feat: events page animation --- app/contact/contact.module.scss | 1 + app/events/events.module.scss | 1 + app/events/page.tsx | 433 +++++--------------------------- 3 files changed, 67 insertions(+), 368 deletions(-) diff --git a/app/contact/contact.module.scss b/app/contact/contact.module.scss index 4bdc2b4..23e3a07 100644 --- a/app/contact/contact.module.scss +++ b/app/contact/contact.module.scss @@ -10,6 +10,7 @@ z-index: 100; top: 30px; left: 20px; + z-index: 15; @media(width>1920px){ transform: scale(1.3); left: 40px; diff --git a/app/events/events.module.scss b/app/events/events.module.scss index 88c70b9..e108f9d 100644 --- a/app/events/events.module.scss +++ b/app/events/events.module.scss @@ -17,6 +17,7 @@ position: absolute; top: 30px; left: 20px; + z-index: 15; @media (width>1920px) { transform: scale(1.3); left: 40px; diff --git a/app/events/page.tsx b/app/events/page.tsx index 8270e11..23ab5a2 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useState, useRef } from "react"; +import React, { useState, useRef, useEffect } from "react"; import styles from "./events.module.scss"; import Folder from "@/components/Events/Folder/Folder"; import Category from "@/components/Events/Category/Category"; @@ -34,6 +34,8 @@ import BackButton from "@/components/Registration/BackButton/BackButton"; import Link from "next/link"; import RegBtn from "@/components/Landing/Navbar/RegBtn/RegBtn"; import Image from "next/image"; +import gsap from "gsap"; +import { useGSAP } from "@gsap/react"; export default function EventsPage() { const [category, setCategory] = useState(""); @@ -49,73 +51,70 @@ export default function EventsPage() { setCategory(""); } - return ( - //
- //
- //

EVENTS

- //
+ const eventrowRef: any = useRef(null); + + useGSAP( + () => { + const tl = gsap.timeline(); - //
- // handleSelect("dance")} - // > - // Dance - // - // handleSelect("music")} - // > - // Music - // - // handleSelect("quizzes")} - // > - // Quizzes - // - // handleSelect("photography")} - // > - // Photography - // - // handleSelect("drama")} - // > - // Drama - // - // handleSelect("fashion")} - // > - // Fashion - // + // if(eventrowRef) - //
- //
- //

Please select a category

- //
+ tl.from(eventrowRef.current.children[0], { + scale: 0, + duration: 0.5, + ease: "power2.out", + delay: 0.5, + }) + .from( + eventrowRef.current.children[1], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[2], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[3], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[4], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ) + .from( + eventrowRef.current.children[5], + { + scale: 0, + duration: 0.5, + ease: "power2.out", + }, + "-=0.25" + ); + }, + { dependencies: [] } + ); - // {isModalOpen && ( - //
- // - //
- // )} - //
+ return ( <> @@ -164,36 +163,6 @@ export default function EventsPage() {
- {/*
- - - - - - -
*/}
@@ -257,310 +226,38 @@ export default function EventsPage() {
-
+
music - - {/* - - - - - - - -
- music -

MUSIC

*/}
music - {/* - - - - - - - -
- music -

QUIZ

*/}
music - {/* - - - - - - - -
- music -

DRAMA

*/}
music - {/* - - - - - - - -
- music -

DANCE

*/}
music - {/* - - - - - - - -
- music -

FASHION

*/}
music - {/* - - - - - - - -
- music -

PHOTO

-

GRAPHY

*/}
- {/*
-
- - - - - - - - -
- music -

DANCE

-
-
- - - - - - - - -
- music -

FASHION

-
-
- - - - - - - - -
- music -

PHOTO

-

GRAPHY

-
-
*/}
From 61618aa62430705609a96cf5e65049be9a35b107 Mon Sep 17 00:00:00 2001 From: Samyak Jain Date: Thu, 17 Oct 2024 00:56:34 +0530 Subject: [PATCH 8/9] feat: combine grid and glow svgs --- app/about/page.tsx | 2 +- app/archive/page.tsx | 2 +- app/articles/page.tsx | 2 +- app/brochure/page.tsx | 2 +- app/contact/page.tsx | 2 +- app/events/page.tsx | 2 +- app/gallery/page.tsx | 2 +- app/page.tsx | 87 ++++---- components/Landing/Grid/Grid.tsx | 328 +++++++++++++++---------------- 9 files changed, 209 insertions(+), 220 deletions(-) diff --git a/app/about/page.tsx b/app/about/page.tsx index c653149..d62a747 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -21,7 +21,7 @@ export default function About() {
- + {/* */} diff --git a/app/archive/page.tsx b/app/archive/page.tsx index 8f743e6..cac7347 100644 --- a/app/archive/page.tsx +++ b/app/archive/page.tsx @@ -152,7 +152,7 @@ export default function GalleryPage() {
- + {/* */} diff --git a/app/articles/page.tsx b/app/articles/page.tsx index 4b0aed4..fbbe9f7 100644 --- a/app/articles/page.tsx +++ b/app/articles/page.tsx @@ -53,7 +53,7 @@ const Articles: React.FC = () => {
- + {/* */} diff --git a/app/brochure/page.tsx b/app/brochure/page.tsx index f21a534..7789ae4 100644 --- a/app/brochure/page.tsx +++ b/app/brochure/page.tsx @@ -19,7 +19,7 @@ export default function Brochure() {
- + {/* */} diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 5110801..6bee634 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -201,7 +201,7 @@ export default function ContactUs() {
- + {/* */} diff --git a/app/events/page.tsx b/app/events/page.tsx index 23ab5a2..64b83a1 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -119,7 +119,7 @@ export default function EventsPage() {
- + {/* */} diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx index 7350353..9a18393 100644 --- a/app/gallery/page.tsx +++ b/app/gallery/page.tsx @@ -75,7 +75,7 @@ const Gallery: React.FC = () => { <>
- + {/* */} diff --git a/app/page.tsx b/app/page.tsx index f8069c8..4c265ca 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -15,51 +15,48 @@ import MobileLanding from "@/components/MobileLanding/MobileLanding/MobileLandin import Sidenav from "@/components/Sidenav/Sidenav"; import Image from "next/image"; -import locationIcon from '@/assets/MobileLanding/locationIcon.svg' +import locationIcon from "@/assets/MobileLanding/locationIcon.svg"; export default function Home() { - return ( - <> - - -
- -
-
- {/*
-
-
- - - - - - -
-
- - - location icon - - - -
- - - -
-
-
- {/**/} - - ); + return ( + <> + + +
+ +
+
+ {/*
+
+
+ + + + {/* */} + + +
+
+ + + location icon + + + +
+ + {/* */} + +
+
+
+ {/**/} + + ); } diff --git a/components/Landing/Grid/Grid.tsx b/components/Landing/Grid/Grid.tsx index 190e832..8a482ac 100644 --- a/components/Landing/Grid/Grid.tsx +++ b/components/Landing/Grid/Grid.tsx @@ -4,178 +4,170 @@ export default function Grid() { return (
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); From b09ebcfdcc689476373de5a07ad120a21765d363 Mon Sep 17 00:00:00 2001 From: Samyak Jain Date: Thu, 17 Oct 2024 01:03:00 +0530 Subject: [PATCH 9/9] style: responsiveness --- app/landing.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/landing.module.scss b/app/landing.module.scss index e630c54..33b6004 100644 --- a/app/landing.module.scss +++ b/app/landing.module.scss @@ -61,7 +61,7 @@ width: 100vw; height: 100lvh; top: 0; - z-index: 0; + z-index: -100000; } }