From 2ad0703e898a0357332f7a9db25eaa9caa40186f Mon Sep 17 00:00:00 2001 From: kallul Date: Wed, 8 Oct 2025 22:09:46 +0530 Subject: [PATCH 1/3] navbar after video --- src/App.jsx | 72 ++++- src/pages/Home.jsx | 591 ++++++++++++++++++++--------------------- src/pages/Wings.jsx | 627 ++++++++++++++++++++++++++++---------------- 3 files changed, 765 insertions(+), 525 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index b52a34c..54f6b6c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,16 +12,72 @@ import MoreEvents from './pages/MoreEvents' const App = () => { return ( - + {/* Render NavbarDemo for all routes except Home */} } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> {/* Added Login route */} + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> ) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 432f7b7..dfc3769 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,312 +1,317 @@ -import React, { useState, useEffect, useRef } from "react"; -import { useGSAP } from "@gsap/react"; -import gsap from "gsap"; - -import { ScrollTrigger } from "gsap/ScrollTrigger"; -import LiquidEther from "../components/ui/LiquidEther"; -import Carousel from "../components/ui/Carousel"; -import Chatbot from "../components/ui/Chatbot"; -gsap.registerPlugin(ScrollTrigger); - - +import React, { useState, useEffect, useRef } from 'react' +import { useGSAP } from '@gsap/react' +import gsap from 'gsap' +import { ScrollTrigger } from 'gsap/ScrollTrigger' +import LiquidEther from '../components/ui/LiquidEther' +import Carousel from '../components/ui/Carousel' +import Chatbot from '../components/ui/Chatbot' +import { NavbarDemo } from '../components/Navbar' +gsap.registerPlugin(ScrollTrigger) function Home() { -  const [showContent, setShowContent] = useState(false); -  const [input, setInput] = useState(""); -  const svgRef = useRef(null); -  const animationRef = useRef(null); + const [showContent, setShowContent] = useState(false) + const [input, setInput] = useState('') + const svgRef = useRef(null) + const animationRef = useRef(null) + const navbarRef = useRef(null) -  const handleKeyDown = (e) => { -    if (e.key === "Enter") { -      e.preventDefault(); -      setInput(""); -    } -  }; + const handleKeyDown = (e) => { + if (e.key === 'Enter') { + e.preventDefault() + setInput('') + } + } -  useEffect(() => { -    window.scrollTo(0, 0); -    -    // Refresh ScrollTrigger after a short delay to ensure DOM is fully rendered -    const timer = setTimeout(() => { -      ScrollTrigger.refresh(); -    }, 300); -    -    return () => clearTimeout(timer); -  }, []); + useEffect(() => { + window.scrollTo(0, 0) // Refresh ScrollTrigger after a short delay to ensure DOM is fully rendered + const timer = setTimeout(() => { + ScrollTrigger.refresh() + }, 300) + return () => clearTimeout(timer) + }, []) -  // Function to properly detect mobile devices -  const isMobileDevice = () => { -    return ( -      typeof window.orientation !== "undefined" || -      navigator.userAgent.indexOf('IEMobile') !== -1 || -      window.innerWidth < 768 -    ); -  }; + // Function to properly detect mobile devices + const isMobileDevice = () => { + return ( + typeof window.orientation !== 'undefined' || + navigator.userAgent.indexOf('IEMobile') !== -1 || + window.innerWidth < 768 + ) + } // --- CORRECTED: Adjusted desktop/tablet font size to prevent overflow --- - const cssFontSize = isMobileDevice() ? "250" : "320"; - - -  useGSAP(() => { -    // Kill any existing animation to prevent conflicts -    if (animationRef.current) { -      animationRef.current.kill(); -    } -    -    const isMobile = isMobileDevice(); -    -    // Better mobile detection with more specific scaling -    let initialScale, finalScale; -    -    if (isMobile) { -      // For mobile, use a more appropriate scale based on screen size -      const screenRatio = window.innerHeight / window.innerWidth; -      initialScale = screenRatio > 1.6 ? 0.4 : 0.6; // Adjust for portrait vs landscape -      finalScale = Math.max(window.innerWidth / 30, 20); // More controlled final scale -    } else { -      initialScale = 1.15; -      finalScale = 15; -    } -    -    // Set initial state -    gsap.set(".vi-mask-group", { -      scale: initialScale, -      transformOrigin: "center center", -    }); -    -    // Create the animation -    animationRef.current = gsap.to(".vi-mask-group", { -      rotate: 10, -      scale: finalScale, -      transformOrigin: "50% 50%", -      ease: "none", -      scrollTrigger: { -        trigger: ".svg-container", -        start: "top top", -        end: "bottom top", -        scrub: true, -        pin: true, -        onEnter: () => setShowContent(true), -        onLeaveBack: () => setShowContent(false), -      }, -    }); + const cssFontSize = isMobileDevice() ? '250' : '320' -    // Fade out background video gradually when About starts -    gsap.to(".bg-video", { -      opacity: 0.5, -      scrollTrigger: { -        trigger: ".about", -        start: "top center", -        end: "top top", -        scrub: true, -      }, -    }); + useGSAP(() => { + // Kill any existing animation to prevent conflicts + if (animationRef.current) { + animationRef.current.kill() + } -    gsap.to(".chat-launcher", { -      autoAlpha: 1, // Fades in and handles visibility -      scale: 1, // Scales it from its default 0.5 to 1 -      duration: 0.5, -      scrollTrigger: { -        trigger: ".about", // The element that triggers the animation -        start: "top center", // Starts when the top of ".about" hits the viewport center -        toggleActions: "play none none reverse", // Fades in on scroll down, fades out on scroll up -      }, -    }); -    -    // Add resize event listener to refresh ScrollTrigger on orientation changes -    const handleResize = () => { -      ScrollTrigger.refresh(); -    }; -    -    window.addEventListener('resize', handleResize); -    -    return () => { -      window.removeEventListener('resize', handleResize); -    }; -  }, []); + const isMobile = isMobileDevice() // Better mobile detection with more specific scaling + let initialScale, finalScale + if (isMobile) { + // For mobile, use a more appropriate scale based on screen size + const screenRatio = window.innerHeight / window.innerWidth + initialScale = screenRatio > 1.6 ? 0.4 : 0.6 // Adjust for portrait vs landscape + finalScale = Math.max(window.innerWidth / 30, 20) // More controlled final scale + } else { + initialScale = 1.15 + finalScale = 15 + } -  -  return ( -   
-      -     
-        -          -            -              -              -                -                  CSS -                -              -            -          -          -            -          -        -     
-      -      {/* Add a simple fallback for mobile if video doesn't play */} -     
-       
-         

CSS

-       
-     
+ // Set initial state for video animation + gsap.set('.vi-mask-group', { + scale: initialScale, + transformOrigin: 'center center', + }) -      {/* About Section */} -      -     
-       
-         
-           
-             
-              ABOUT_TERMINAL -           
-           
-             

-                $~ mkdir Computer-Science-Society -           

-           

-            $~ cat About.txt -           
-            The{" "} -            -            Computer Science Society -            , run by the CSE department of -            -            {" "}NIT Silchar -            , aims to impart academic, technical, and socio-cultural awareness -            to the students of our college. -           

+ // Create the video animation + animationRef.current = gsap.to('.vi-mask-group', { + rotate: 10, + scale: finalScale, + transformOrigin: '50% 50%', + ease: 'none', + scrollTrigger: { + trigger: '.svg-container', + start: 'top top', + end: 'bottom top', + scrub: true, + pin: true, + onEnter: () => setShowContent(true), + onLeaveBack: () => setShowContent(false), + }, + }) -           
-           
-              $~ -              setInput(e.target.value)} -                onKeyDown={handleKeyDown} -                className="bg-transparent outline-none border-none text-lg font-mono text-white w-full caret-cyan-400" -                placeholder="type a command..." -                autoFocus -              /> -           
-         
-         
-            About Us -         
-       
-   
+ // Fade out background video gradually when About starts + gsap.to('.bg-video', { + opacity: 0.5, + scrollTrigger: { + trigger: '.about', + start: 'top center', + end: 'top top', + scrub: true, + }, + }) -    {/* Announcement Section */} -   
-       
+ gsap.to('.chat-launcher', { + autoAlpha: 1, // Fades in and handles visibility + scale: 1, // Scales it from its default 0.5 to 1 + duration: 0.5, + scrollTrigger: { + trigger: '.about', // The element that triggers the animation + start: 'top center', // Starts when the top of ".about" hits the viewport center + toggleActions: 'play none none reverse', // Fades in on scroll down, fades out on scroll up + }, + }) -         
-            -         
-         
-            {[...Array(30)].map((_, i) => ( -             
-                {Math.random() > 0.5 ? "1" : "0"} -             
-            ))} -         
-        -          -            -          -        -     
+ // Navbar animation: Slide in from bottom on initial load + gsap.set(navbarRef.current, { + yPercent: 100, // Start off-screen at the bottom (relative to its own height) + autoAlpha: 0, // Initially invisible + }) -      {/* Foreground Terminal Box */} -     
-        {/* Terminal Header */} -       
-         
-         
-         
-          ANNOUNCEMENTS_TERMINAL -       
+ gsap.to(navbarRef.current, { + yPercent: 0, // Slide to its normal position + autoAlpha: 1, // Fade in + duration: 1, // Smooth animation duration + ease: 'power3.out', // Smoother easing for a polished effect + delay: 0.3, // Slight delay to ensure page load stability + }) -        {/* Terminal Title */} -       

-          $~ Announcements -       

+ // Add resize event listener to refresh ScrollTrigger on orientation changes + const handleResize = () => { + ScrollTrigger.refresh() + } + window.addEventListener('resize', handleResize) + return () => { + window.removeEventListener('resize', handleResize) + } + }, []) -        {/* Carousel */} -       
-          -       
-       
-          $~ -         
-       
-     
-   
- - - -    {/* Pillars Section */} -    -   
-  ); + return ( +
+ +
+ + + + + + + CSS + + + + + + + + +
+ {/* NavbarDemo with ref for animation, sticky positioning */} +
+ +
+ {/* Add a simple fallback for mobile if video doesn't play */} +
+
+

CSS

+
+
+ {/* About Section */} +
+
+
+
+
+ + ABOUT_TERMINAL + +
+
+

+ $~ mkdir{' '} + Computer-Science-Society +

+

+ $~ cat{' '} + About.txt +
+ The + + Computer Science Society + + , run by the CSE department of + + NIT Silchar + + , aims to impart academic, technical, and socio-cultural + awareness to the students of our college. +

+
+
+ $~ + setInput(e.target.value)} + onKeyDown={handleKeyDown} + className="bg-transparent outline-none border-none text-lg font-mono text-white w-full caret-cyan-400" + placeholder="type a command..." + autoFocus + /> +
+
+
+ About Us +
+
+
+ {/* Announcement Section */} +
+
+
+ +
+
+ {[...Array(30)].map((_, i) => ( +
+ {Math.random() > 0.5 ? '1' : '0'} +
+ ))} +
+ + + + + +
+ {/* Foreground Terminal Box */} +
+
+
+
+
+ + ANNOUNCEMENTS_TERMINAL + +
+

+ $~ Announcements +

+
+ +
+
+ $~ +
+
+
+
+ {/* Pillars Section */} +
+ ) } -export default Home; - +export default Home diff --git a/src/pages/Wings.jsx b/src/pages/Wings.jsx index 0d71996..788710b 100644 --- a/src/pages/Wings.jsx +++ b/src/pages/Wings.jsx @@ -1,47 +1,47 @@ -"use client"; -import { useScroll, useTransform, motion, useInView } from "framer-motion"; -import React, { useEffect, useRef, useState } from "react"; -import { SparklesCore } from "../components/ui/sparkles"; +'use client' +import { useScroll, useTransform, motion, useInView } from 'framer-motion' +import React, { useEffect, useRef, useState } from 'react' +import { SparklesCore } from '../components/ui/sparkles' const Wings = () => { - const ref = useRef(null); - const containerRef = useRef(null); - const [height, setHeight] = useState(0); - const [activeTerminal, setActiveTerminal] = useState(null); - const [scrollDirection, setScrollDirection] = useState("down"); - const terminalRefs = useRef([]); - const lastScrollY = useRef(0); + const ref = useRef(null) + const containerRef = useRef(null) + const [height, setHeight] = useState(0) + const [activeTerminal, setActiveTerminal] = useState(null) + const [scrollDirection, setScrollDirection] = useState('down') + const terminalRefs = useRef([]) + const lastScrollY = useRef(0) useEffect(() => { if (ref.current) { - const rect = ref.current.getBoundingClientRect(); - setHeight(rect.height); + const rect = ref.current.getBoundingClientRect() + setHeight(rect.height) } - }, [ref]); + }, [ref]) // Track scroll direction useEffect(() => { const handleScroll = () => { - const currentScrollY = window.scrollY; + const currentScrollY = window.scrollY if (currentScrollY > lastScrollY.current) { - setScrollDirection("down"); + setScrollDirection('down') } else if (currentScrollY < lastScrollY.current) { - setScrollDirection("up"); + setScrollDirection('up') } - lastScrollY.current = currentScrollY; - }; + lastScrollY.current = currentScrollY + } - window.addEventListener("scroll", handleScroll, { passive: true }); - return () => window.removeEventListener("scroll", handleScroll); - }, []); + window.addEventListener('scroll', handleScroll, { passive: true }) + return () => window.removeEventListener('scroll', handleScroll) + }, []) const { scrollYProgress } = useScroll({ target: containerRef, - offset: ["start 10%", "end 50%"], - }); + offset: ['start 10%', 'end 50%'], + }) - const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]); - const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]); + const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]) + const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]) // Font definitions for each wing const wingFonts = [ @@ -52,112 +52,118 @@ const Wings = () => { "font-bold font-['Goldman']", // PR Wing "font-bold font-['Goldman']", // Design Wing "font-bold font-['Goldman']", // Literature Wing - ]; + ] // Icons for each wing const wingIcons = [ - "👑", // Executive Wing - crown - "💻", // Dev Wing - laptop - "⚡", // CP Wing - lightning bolt - "🤖", // ML Wing - robot - "📢", // PR Wing - megaphone - "🎨", // Design Wing - artist palette - "📚", // Literature Wing - books - ]; + '👑', // Executive Wing - crown + '💻', // Dev Wing - laptop + '⚡', // CP Wing - lightning bolt + '🤖', // ML Wing - robot + '📢', // PR Wing - megaphone + '🎨', // Design Wing - artist palette + '📚', // Literature Wing - books + ] // Animation variants for timeline markers // Update your marker variants -const markerVariants = { - hidden: { scale: 0, opacity: 0 }, - visible: { - scale: 1, - opacity: 1, - transition: { - type: "spring", - stiffness: 300, - damping: 15, - delay: 0.2 - } - }, - active: { - scale: 1.3, - boxShadow: "0 0 20px rgba(34, 211, 238, 0.8)", - transition: { - duration: 0.3, - repeat: Infinity, - repeatType: "reverse" - } + const markerVariants = { + hidden: { scale: 0, opacity: 0 }, + visible: { + scale: 1, + opacity: 1, + transition: { + type: 'spring', + stiffness: 300, + damping: 15, + delay: 0.2, + }, + }, + active: { + scale: 1.3, + boxShadow: '0 0 20px rgba(34, 211, 238, 0.8)', + transition: { + duration: 0.3, + repeat: Infinity, + repeatType: 'reverse', + }, + }, } -}; - -// Add connection lines between markers -const connectionVariants = { - hidden: { scaleY: 0, opacity: 0 }, - visible: { - scaleY: 1, - opacity: 1, - transition: { - duration: 0.8, - ease: "easeOut" - } + + // Add connection lines between markers + const connectionVariants = { + hidden: { scaleY: 0, opacity: 0 }, + visible: { + scaleY: 1, + opacity: 1, + transition: { + duration: 0.8, + ease: 'easeOut', + }, + }, } -}; // Animation variants for terminal entries const terminalVariants = { - hidden: { - opacity: 0, - y: scrollDirection === "down" ? 50 : -50, - rotateX: -15 + hidden: { + opacity: 0, + y: scrollDirection === 'down' ? 50 : -50, + rotateX: -15, }, - visible: { - opacity: 1, + visible: { + opacity: 1, y: 0, rotateX: 0, - transition: { - duration: 0.8, - ease: "easeOut", - staggerChildren: 0.1 - } - } - }; + transition: { + duration: 0.8, + ease: 'easeOut', + staggerChildren: 0.1, + }, + }, + } // Terminal content animation const contentVariants = { - hidden: { opacity: 0, y: scrollDirection === "down" ? 20 : -20 }, - visible: { - opacity: 1, + hidden: { opacity: 0, y: scrollDirection === 'down' ? 20 : -20 }, + visible: { + opacity: 1, y: 0, - transition: { duration: 0.5 } - } - }; + transition: { duration: 0.5 }, + }, + } // Data for the 7 wings of the Computer Science Society const wingsData = [ { - title: "Executive Wing", + title: 'Executive Wing', content: ( - setActiveTerminal(activeTerminal === 0 ? null : 0)} - animate={{ + animate={{ y: activeTerminal === 0 ? [0, -5, 0] : 0, - transition: { duration: 0.3 } + transition: { duration: 0.3 }, }} variants={terminalVariants} initial="hidden" whileInView="visible" - viewport={{ once: true, margin: "-100px" }} + viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} > {/* Animated background elements */}
- + {/* Terminal header */} - +
@@ -165,52 +171,76 @@ const connectionVariants = {
EXECUTIVE_TERMINAL - + {/* Terminal content */} - $ executive --about - // Focuses on leadership, management, and organizational strategies. - The Executive Wing of CSS is considered to be the backbone of the entire Computer Science Society. With the goal of making each and every event, module, and session organized under the banner of CSS a grand success, the wing manages, coordinates, and arranges resources and assets to ensure a smooth workflow among all the individual wings. The wing thus forms the binding force between the various sub-wings, thereby making every inch of hard work a grand success. - + + $ executive --about + + + // Focuses on leadership, management, and organizational strategies. + + + The Executive Wing of CSS is considered to be the backbone of the + entire Computer Science Society. With the goal of making each and + every event, module, and session organized under the banner of CSS a + grand success, the wing manages, coordinates, and arranges resources + and assets to ensure a smooth workflow among all the individual + wings. The wing thus forms the binding force between the various + sub-wings, thereby making every inch of hard work a grand success. + + {/* Command prompt */} - + $~ - - + {/* Cyberpunk corner indicators */}
- ) + ), }, { - title: "Dev Wing", + title: 'Dev Wing', content: ( - setActiveTerminal(activeTerminal === 1 ? null : 1)} - animate={{ + animate={{ y: activeTerminal === 1 ? [0, -5, 0] : 0, - transition: { duration: 0.3 } + transition: { duration: 0.3 }, }} variants={terminalVariants} initial="hidden" whileInView="visible" - viewport={{ once: true, margin: "-100px" }} + viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} >
- - + +
@@ -218,49 +248,75 @@ const connectionVariants = {
DEV_TERMINAL - - $ dev --about - // Building practical solutions - The Developers-Wing of CSS is one of the most significant parts of the society and is responsible for maintaining and upgrading the official Website and App of the Society. The wing is targeted to provide a platform for the junior members of the CSE branch to showcase and upskill their technical knowledge while working on industry-standard projects. It is an ever-growing and expanding group of enthusiastic developers that take pride in building real-world projects and contributing to the proper functioning of our society. - - + + + $ dev --about + + + // Building practical solutions + + + The Developers-Wing of CSS is one of the most significant parts of + the society and is responsible for maintaining and upgrading the + official Website and App of the Society. The wing is targeted to + provide a platform for the junior members of the CSE branch to + showcase and upskill their technical knowledge while working on + industry-standard projects. It is an ever-growing and expanding + group of enthusiastic developers that take pride in building + real-world projects and contributing to the proper functioning of + our society. + + + $~ - - +
- ) + ), }, { - title: "CP Wing", + title: 'CP Wing', content: ( - setActiveTerminal(activeTerminal === 2 ? null : 2)} - animate={{ + animate={{ y: activeTerminal === 2 ? [0, -5, 0] : 0, - transition: { duration: 0.3 } + transition: { duration: 0.3 }, }} variants={terminalVariants} initial="hidden" whileInView="visible" - viewport={{ once: true, margin: "-100px" }} + viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} >
- - + +
@@ -268,49 +324,73 @@ const connectionVariants = {
CP_TERMINAL - - $ cp --about - // Enhancing problem-solving skills - The CP-Wing is a crucial part of CSS which is responsible for the improvement of problem-solving skills, along with the strengthening of the core DSA concepts which also serves as a torchbearer for students in the field of CP. The CP-Wing works hard to produce better and more efficient coders, who will then be able to help take the world to even greater heights, exclusively for the benefit of our students. - - + + + $ cp --about + + + // Enhancing problem-solving skills + + + The CP-Wing is a crucial part of CSS which is responsible for the + improvement of problem-solving skills, along with the strengthening + of the core DSA concepts which also serves as a torchbearer for + students in the field of CP. The CP-Wing works hard to produce + better and more efficient coders, who will then be able to help take + the world to even greater heights, exclusively for the benefit of + our students. + + + $~ - - +
- ) + ), }, { - title: "ML Wing", + title: 'ML Wing', content: ( - setActiveTerminal(activeTerminal === 3 ? null : 3)} - animate={{ + animate={{ y: activeTerminal === 3 ? [0, -5, 0] : 0, - transition: { duration: 0.3 } + transition: { duration: 0.3 }, }} variants={terminalVariants} initial="hidden" whileInView="visible" - viewport={{ once: true, margin: "-100px" }} + viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} >
- - + +
@@ -318,49 +398,73 @@ const connectionVariants = {
ML_TERMINAL - - $ ml --about - // Advancing machine learning techniques - The ML Wing of CSS is mainly responsible for developing a culture of machine learning and other aspects of artificial intelligence in our college. In order to help budding ML and AI enthusiasts, the wing also organize different events, workshops, speaker sessions, etc. in the domains of AI and ML. All the members of ML Wing are highly motivated and enthusiastic to work towards the greater good of the CSS society. - - + + + $ ml --about + + + // Advancing machine learning techniques + + + The ML Wing of CSS is mainly responsible for developing a culture of + machine learning and other aspects of artificial intelligence in our + college. In order to help budding ML and AI enthusiasts, the wing + also organize different events, workshops, speaker sessions, etc. in + the domains of AI and ML. All the members of ML Wing are highly + motivated and enthusiastic to work towards the greater good of the + CSS society. + + + $~ - - +
- ) + ), }, { - title: "PR Wing", + title: 'PR Wing', content: ( - setActiveTerminal(activeTerminal === 4 ? null : 4)} - animate={{ + animate={{ y: activeTerminal === 4 ? [0, -5, 0] : 0, - transition: { duration: 0.3 } + transition: { duration: 0.3 }, }} variants={terminalVariants} initial="hidden" whileInView="visible" - viewport={{ once: true, margin: "-100px" }} + viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} >
- - + +
@@ -368,49 +472,73 @@ const connectionVariants = {
PR_TERMINAL - - $ pr --about - // Advancing public relations strategies - The Public Relations Wing of the Computer Science Society, NIT Silchar Society is the division responsible for maintaining Relations of the Society with External Entities, Organizations, and Individuals. The PR Wing of the CSS, NIT Silchar works closely with other Wings of the society to ensure that all of the society's activities are effectively carried out and hereby make an impression on the image of the Society holistically. - - + + + $ pr --about + + + // Advancing public relations strategies + + + The Public Relations Wing of the Computer Science Society, NIT + Silchar Society is the division responsible for maintaining + Relations of the Society with External Entities, Organizations, and + Individuals. The PR Wing of the CSS, NIT Silchar works closely with + other Wings of the society to ensure that all of the society's + activities are effectively carried out and hereby make an impression + on the image of the Society holistically. + + + $~ - - +
- ) + ), }, { - title: "Design Wing", + title: 'Design Wing', content: ( - setActiveTerminal(activeTerminal === 5 ? null : 5)} - animate={{ + animate={{ y: activeTerminal === 5 ? [0, -5, 0] : 0, - transition: { duration: 0.3 } + transition: { duration: 0.3 }, }} variants={terminalVariants} initial="hidden" whileInView="visible" - viewport={{ once: true, margin: "-100px" }} + viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} >
- - + +
@@ -418,49 +546,74 @@ const connectionVariants = {
DESIGN_TERMINAL - - $ design --about - // Crafting user experiences - The Design Wing of CSS is a community of designers whose goal is to provide a good environment for designers to grow their existing talent and sharpen it by working on real-world projects for our society. It focuses on conducting introductory sessions on the basics of design and industry-standard tools such as Adobe Illustrator, Adobe Photoshop, Adobe Premiere Pro, Adobe After Effects, Figma, etc. The wing believes in the fact that everyone can be a designer with just a little bit of practice and dedication. - - + + + $ design --about + + + // Crafting user experiences + + + The Design Wing of CSS is a community of designers whose goal is to + provide a good environment for designers to grow their existing + talent and sharpen it by working on real-world projects for our + society. It focuses on conducting introductory sessions on the + basics of design and industry-standard tools such as Adobe + Illustrator, Adobe Photoshop, Adobe Premiere Pro, Adobe After + Effects, Figma, etc. The wing believes in the fact that everyone can + be a designer with just a little bit of practice and dedication. + + + $~ - - +
- ) + ), }, { - title: "Literature Wing", + title: 'Literature Wing', content: ( - setActiveTerminal(activeTerminal === 6 ? null : 6)} - animate={{ + animate={{ y: activeTerminal === 6 ? [0, -5, 0] : 0, - transition: { duration: 0.3 } + transition: { duration: 0.3 }, }} variants={terminalVariants} initial="hidden" whileInView="visible" - viewport={{ once: true, margin: "-100px" }} + viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} >
- - + +
@@ -468,34 +621,52 @@ const connectionVariants = {
Literature_TERMINAL - - $ Literature --about - // Exploring the world of literature - The Literary wing of CSS takes care of all the literary work published and managed by the Computer Science Society of NIT Silchar. From social media posts, technical and website content for the official CSS website and Play Store application to description taglines of social media handles, the literary wing handles it all. BITSCRIBE, the annual magazine of the Computer Science Society, is also compiled and published by the literary wing. - - + + + $ Literature --about + + + // Exploring the world of literature + + + The Literary wing of CSS takes care of all the literary work + published and managed by the Computer Science Society of NIT + Silchar. From social media posts, technical and website content for + the official CSS website and Play Store application to description + taglines of social media handles, the literary wing handles it all. + BITSCRIBE, the annual magazine of the Computer Science Society, is + also compiled and published by the literary wing. + + + $~ - - +
- ) + ), }, - ]; + ] return (
- + ref={containerRef} + > {/* Animated background elements */}
{/* Binary rain animation */} @@ -527,7 +698,7 @@ const connectionVariants = { {/* Header with centered WINGS title and sparkle effect */}
-

@@ -556,28 +727,33 @@ const connectionVariants = {

- +
{wingsData.map((item, index) => ( -
+
- - {wingIcons[index]} -

+

{/* Sparkles effect for each wing title */}
-

+

{/* Sparkles effect for mobile view */}
+ className="absolute md:left-8 left-8 top-0 overflow-hidden w-[2px] bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-[0%] via-cyan-700 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)]" + >

- ); -}; + ) +} -export default Wings; \ No newline at end of file +export default Wings From 228c71c33d3002906fede25223d3ab59a82df31f Mon Sep 17 00:00:00 2001 From: kallul Date: Sat, 11 Oct 2025 15:49:04 +0530 Subject: [PATCH 2/3] developer page fixed --- src/pages/Developers.jsx | 71 ++++++++------- src/pages/Home.jsx | 30 ++----- src/pages/Wings.jsx | 183 +++++++++++++++++---------------------- 3 files changed, 124 insertions(+), 160 deletions(-) diff --git a/src/pages/Developers.jsx b/src/pages/Developers.jsx index 758dcaa..c54ea22 100644 --- a/src/pages/Developers.jsx +++ b/src/pages/Developers.jsx @@ -18,12 +18,12 @@ import teamData from '../jsonData/developers.json' // Fetch data from JSON import '../styles/developers.css' import { NavbarDemo } from '../components/Navbar' -// Default options for Tilt component +// Default options for Tilt component with no scale const defaultTiltOptions = { reverse: true, max: 35, perspective: 1000, - scale: 1.05, + scale: 1.0, speed: 1000, transition: true, axis: null, @@ -40,7 +40,10 @@ const MemberCard = ({ member, index }) => { return ( -
+
{ return

No members found

return ( -
-
- +
+ +
- {visibleItems} - + + {visibleItems} + +
+
- -
{Array.from({ length: totalSlides }).map((_, idx) => (
- {/* NavbarDemo with ref for animation, sticky positioning */} -
- -
+ {/* Add NavbarDemo after the video section */} + {/* Add a simple fallback for mobile if video doesn't play */}
@@ -282,6 +265,7 @@ function Home() {
{/* Foreground Terminal Box */}
+ {/* Terminal Header */}
@@ -290,12 +274,14 @@ function Home() { ANNOUNCEMENTS_TERMINAL
+ {/* Terminal Title */}

$~ Announcements

+ {/* Carousel */}
{ const [height, setHeight] = useState(0) const [activeTerminal, setActiveTerminal] = useState(null) const [scrollDirection, setScrollDirection] = useState('down') - const terminalRefs = useRef([]) const lastScrollY = useRef(0) useEffect(() => { @@ -54,19 +53,18 @@ const Wings = () => { "font-bold font-['Goldman']", // Literature Wing ] - // Icons for each wing - const wingIcons = [ - '👑', // Executive Wing - crown - '💻', // Dev Wing - laptop - '⚡', // CP Wing - lightning bolt - '🤖', // ML Wing - robot - '📢', // PR Wing - megaphone - '🎨', // Design Wing - artist palette - '📚', // Literature Wing - books + // Image URLs for each wing + const wingImages = [ + 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177346/xxztrtw9kj747xt64jd8.png', // Executive Wing + 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177845/x8g8su8k952wrli3eosb.png', // Dev Wing + 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177573/iad8qjgrxxo0yhovypsk.jpg', // CP Wing + 'https://i.pinimg.com/736x/71/b8/4f/71b84f6710433f6b81d533766fa2d78b.jpg', // ML Wing + 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177714/opwjrjl0xqauc16exzrj.jpg', // PR Wing + '/images/design-wing.png', // Design Wing + '/images/literature-wing.png', // Literature Wing ] // Animation variants for timeline markers - // Update your marker variants const markerVariants = { hidden: { scale: 0, opacity: 0 }, visible: { @@ -90,19 +88,6 @@ const Wings = () => { }, } - // Add connection lines between markers - const connectionVariants = { - hidden: { scaleY: 0, opacity: 0 }, - visible: { - scaleY: 1, - opacity: 1, - transition: { - duration: 0.8, - ease: 'easeOut', - }, - }, - } - // Animation variants for terminal entries const terminalVariants = { hidden: { @@ -132,6 +117,20 @@ const Wings = () => { }, } + // Header animation + const headerVariants = { + hidden: { opacity: 0, scale: 0.8 }, + visible: { + opacity: 1, + scale: 1, + transition: { + duration: 0.8, + ease: 'easeOut', + delay: 0.2, + }, + }, + } + // Data for the 7 wings of the Computer Science Society const wingsData = [ { @@ -155,11 +154,8 @@ const Wings = () => { viewport={{ once: true, margin: '-100px' }} custom={scrollDirection} > - {/* Animated background elements */}
- - {/* Terminal header */} {
EXECUTIVE_TERMINAL - - {/* Terminal content */} $ executive --about @@ -191,8 +185,6 @@ const Wings = () => { wings. The wing thus forms the binding force between the various sub-wings, thereby making every inch of hard work a grand success. - - {/* Command prompt */} { transition={{ duration: 1, repeat: Infinity }} > - - {/* Cyberpunk corner indicators */}
@@ -236,7 +226,6 @@ const Wings = () => { >
- {
DEV_TERMINAL - $ dev --about @@ -269,7 +257,6 @@ const Wings = () => { real-world projects and contributing to the proper functioning of our society. - { transition={{ duration: 1, repeat: Infinity }} > -
@@ -312,7 +298,6 @@ const Wings = () => { >
- {
CP_TERMINAL - $ cp --about @@ -343,7 +327,6 @@ const Wings = () => { the world to even greater heights, exclusively for the benefit of our students. - { transition={{ duration: 1, repeat: Infinity }} > -
@@ -386,7 +368,6 @@ const Wings = () => { >
- {
ML_TERMINAL - $ ml --about @@ -417,7 +397,6 @@ const Wings = () => { motivated and enthusiastic to work towards the greater good of the CSS society. - { transition={{ duration: 1, repeat: Infinity }} > -
@@ -460,7 +438,6 @@ const Wings = () => { >
- {
PR_TERMINAL - $ pr --about @@ -491,7 +467,6 @@ const Wings = () => { activities are effectively carried out and hereby make an impression on the image of the Society holistically. - { transition={{ duration: 1, repeat: Infinity }} > -
@@ -534,7 +508,6 @@ const Wings = () => { >
- {
DESIGN_TERMINAL - $ design --about @@ -566,7 +538,6 @@ const Wings = () => { Effects, Figma, etc. The wing believes in the fact that everyone can be a designer with just a little bit of practice and dedication. - { transition={{ duration: 1, repeat: Infinity }} > -
@@ -609,7 +579,6 @@ const Wings = () => { >
- {
- Literature_TERMINAL + LITERATURE_TERMINAL - - $ Literature --about + $ literature --about { BITSCRIBE, the annual magazine of the Computer Science Society, is also compiled and published by the literary wing. - { transition={{ duration: 1, repeat: Infinity }} > -
@@ -669,12 +635,11 @@ const Wings = () => { > {/* Animated background elements */}
- {/* Binary rain animation */}
{[...Array(30)].map((_, i) => (
{
))}
- - {/* Grid lines */}
- - {/* Pulsing circles */}
-
- {/* Header with centered WINGS title and sparkle effect */} -
+
+ {/* Enhanced Header Section */} +

WINGS

- {/* Sparkle effect */} -
+
-

- The specialized divisions of our Computer Science Society +

+ Discover the specialized divisions powering our Computer Science + Society

-
-
-
-
-
+
+
+
+
+
-
+
@@ -744,17 +710,23 @@ const Wings = () => { animate={activeTerminal === index ? 'active' : ''} > - {wingIcons[index]} +
+ {`${item.title} +
+

- {/* Sparkles effect for each wing title */}
{

-
-

- {/* Sparkles effect for mobile view */} -
- -
- {item.title} -

- {item.content} +
+
+

+
+ +
+ {item.title} +

+ {item.content} +
))} From 2997ee88c26178de95e213c6bc09a967a85284af Mon Sep 17 00:00:00 2001 From: kallul Date: Sat, 11 Oct 2025 15:53:07 +0530 Subject: [PATCH 3/3] wings page responsive --- src/pages/Wings.jsx | 31 ++++++++++++------------------- 1 file changed, 12 insertions(+), 19 deletions(-) diff --git a/src/pages/Wings.jsx b/src/pages/Wings.jsx index ad407dc..400c50f 100644 --- a/src/pages/Wings.jsx +++ b/src/pages/Wings.jsx @@ -53,15 +53,15 @@ const Wings = () => { "font-bold font-['Goldman']", // Literature Wing ] - // Image URLs for each wing + // Emojis for each wing const wingImages = [ - 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177346/xxztrtw9kj747xt64jd8.png', // Executive Wing - 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177845/x8g8su8k952wrli3eosb.png', // Dev Wing - 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177573/iad8qjgrxxo0yhovypsk.jpg', // CP Wing - 'https://i.pinimg.com/736x/71/b8/4f/71b84f6710433f6b81d533766fa2d78b.jpg', // ML Wing - 'https://res.cloudinary.com/dgechlqls/image/upload/v1760177714/opwjrjl0xqauc16exzrj.jpg', // PR Wing - '/images/design-wing.png', // Design Wing - '/images/literature-wing.png', // Literature Wing + '👑', // Executive Wing + '💻', // Dev Wing + '🧠', // CP Wing + '🤖', // ML Wing + '📢', // PR Wing + '🎨', // Design Wing + '📝', // Literature Wing ] // Animation variants for timeline markers @@ -700,7 +700,7 @@ const Wings = () => { key={index} className="flex justify-start pt-10 md:pt-40 md:gap-10" > -
+
{ whileHover={{ scale: 1.2 }} transition={{ type: 'spring', stiffness: 400, damping: 10 }} > -
- {`${item.title} -
-
+ {wingImages[index]}

{ particleColor="#38BDF8" />

- {item.title} + {item.title} {wingImages[index]}

{item.content}
@@ -764,10 +757,10 @@ const Wings = () => {
))}