diff --git a/package-lock.json b/package-lock.json index 979315a..db6d879 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.1.0", "dependencies": { "@fontsource-variable/orbitron": "^5.2.8", + "@gsap/react": "^2.1.2", + "@lottiefiles/dotlottie-react": "^0.17.13", "@react-three/drei": "^10.7.6", "@react-three/fiber": "^9.3.0", "@react-three/postprocessing": "^3.0.4", @@ -522,6 +524,16 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@gsap/react": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz", + "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==", + "license": "SEE LICENSE AT https://gsap.com/standard-license", + "peerDependencies": { + "gsap": "^3.12.5", + "react": ">=17" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -1061,6 +1073,24 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lottiefiles/dotlottie-react": { + "version": "0.17.13", + "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.17.13.tgz", + "integrity": "sha512-Ui8bqFlxqxLqB3G4bE9nsSw05lUn7eiZ24dSi/NVHFjTMAlb/JxdS8xWt1cdF2W1yJPNCeQuze6kkqNC5OMbJg==", + "license": "MIT", + "dependencies": { + "@lottiefiles/dotlottie-web": "0.61.0" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19" + } + }, + "node_modules/@lottiefiles/dotlottie-web": { + "version": "0.61.0", + "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.61.0.tgz", + "integrity": "sha512-1QwcDchh/TXTvP9zXUHA5oJOdhEdUrn6U7gAiQ1AXEUrcK6PTU6v5D3byP76BK56fQjoY2WQ2A4pYDCCvoVRqw==", + "license": "MIT" + }, "node_modules/@mediapipe/tasks-vision": { "version": "0.10.17", "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz", diff --git a/package.json b/package.json index 5dffc79..e177251 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ }, "dependencies": { "@fontsource-variable/orbitron": "^5.2.8", + "@gsap/react": "^2.1.2", + "@lottiefiles/dotlottie-react": "^0.17.13", "@react-three/drei": "^10.7.6", "@react-three/fiber": "^9.3.0", "@react-three/postprocessing": "^3.0.4", diff --git a/src/app/components/AboutUs.jsx b/src/app/components/AboutUs.jsx new file mode 100644 index 0000000..cd5ee6d --- /dev/null +++ b/src/app/components/AboutUs.jsx @@ -0,0 +1,169 @@ +"use client"; + +import { motion } from "framer-motion"; +import { useRef, useEffect, useState } from "react"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; + +/* Glow */ +const Glow = ({ className = "" }) => ( +
+); + +/* Grid */ +function GridPattern() { + return ( +
+ + + + + + + + +
+ ); +} + +export default function AboutUs() { + const sectionRef = useRef(null); + const [visible, setVisible] = useState(false); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => entry.isIntersecting && setVisible(true), + { threshold: 0.15 } + ); + + if (sectionRef.current) observer.observe(sectionRef.current); + return () => observer.disconnect(); + }, []); + + return ( +
+ + + +
+ + {/* TITLE */} + +

+ AB + + {/* LOTTIE O */} + + + + + UT US +

+ + + {/* ABOUT CARD */} + + + {/* Glow on hover */} + + + {/* Corners */} + {["tl", "tr", "bl", "br"].map((p) => ( +
+ ))} + + {/* TEXT */} +

+ The Machine Learning for Everyone (ML4E) Club at the National Institute + of Technology Rourkela is a dynamic and vibrant community dedicated to + fostering knowledge, innovation, and collaboration in the field of + machine learning and artificial intelligence. As one of the leading + technical clubs on campus, it serves as a hub for students passionate + about exploring the cutting-edge advancements in these transformative + technologies. The club envisions a future where machine learning is a + fundamental skill accessible to all, empowering students to solve + real-world problems and innovate across various domains. Membership is + open to all students of NIT Rourkela who have an interest in machine + learning and artificial intelligence. The club values enthusiasm, + curiosity, and a willingness to learn. By joining, members gain access + to a wealth of resources, including hackathons, project opportunities, + and a network of like-minded peers. +

+ + + +
+
+ ); +} + diff --git a/src/app/components/Home.jsx b/src/app/components/Home.jsx index 4d17bd9..66167e8 100644 --- a/src/app/components/Home.jsx +++ b/src/app/components/Home.jsx @@ -872,7 +872,7 @@ export default function Home() { }, [colors]); return ( -
+
{/* Content Section */} diff --git a/src/app/components/Navbar.jsx b/src/app/components/Navbar.jsx index 1b40a9c..afd7561 100644 --- a/src/app/components/Navbar.jsx +++ b/src/app/components/Navbar.jsx @@ -67,13 +67,17 @@ export default function Navbar() { } }; + const handleOpenNav = () => setIsOpen(true); + if (typeof window !== "undefined") { window.addEventListener("keydown", handleKeyDown); + window.addEventListener("open-navigation", handleOpenNav); } return () => { if (typeof window !== "undefined") { window.removeEventListener("keydown", handleKeyDown); + window.removeEventListener("open-navigation", handleOpenNav); } }; }, []); diff --git a/src/app/components/WhatWeDo.tsx b/src/app/components/WhatWeDo.tsx new file mode 100644 index 0000000..2f029a8 --- /dev/null +++ b/src/app/components/WhatWeDo.tsx @@ -0,0 +1,236 @@ +"use client"; +import React, { useRef } from "react"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; +import { useGSAP } from "@gsap/react"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; + +gsap.registerPlugin(ScrollTrigger); + +const WhatWeDo = () => { + const container = useRef(null); + const blackLine = useRef(null); + const blackLine2 = useRef(null); + const blackLine3 = useRef(null); + const lottieRef1 = useRef(null); + const lottieRef2 = useRef(null); + const lottieRef3 = useRef(null); + + useGSAP( + () => { + // Header Animation + gsap.from("#processhead", { + scale: 1.5, + scrollTrigger: { + trigger: "#processhead", + scrub: true, + }, + }); + + // Lines Animation - Logic updated to use fromTo for robust animation + [blackLine, blackLine2, blackLine3].forEach((ref) => { + if (ref.current) { + gsap.fromTo( + ref.current, + { width: "0%" }, + { + width: "100%", + scrollTrigger: { + trigger: ref.current, + scrub: true, + start: "top bottom", + }, + } + ); + } + }); + + // Lottie Scale Animation - Logic aligned with user's reference + [lottieRef1, lottieRef2, lottieRef3].forEach((ref) => { + if (ref.current) { + gsap.from(ref.current, { + scale: 0.1, + scrollTrigger: { + trigger: ref.current, + scrub: true, + start: "top bottom", + }, + }); + } + }); + + // Text Slide Animations - Logic aligned with user's reference + gsap.from("#textLeftFirst", { + x: -100, + scrollTrigger: { + trigger: "#textLeftFirst", + scrub: true, + start: "top bottom", + }, + }); + + gsap.from("#textRight", { + x: 100, + scrollTrigger: { + trigger: "#textRight", + scrub: true, + start: "top bottom", + }, + }); + + gsap.from("#textLeftSecond", { + x: -100, + scrollTrigger: { + trigger: "#textLeftSecond", + scrub: true, + start: "top bottom", + }, + }); + }, + { scope: container } + ); + + return ( +
+
+ {/* Heading */} +

+ WHAT WE DO +

+ + {/* Steps */} +
+ {/* STEP 1 */} +
+
+
+

Open Source

+

+ Collaborate globally and build real-world machine learning products with developers and researchers. + Work on scalable systems, AI tools, and community-driven innovations used worldwide. + Leave your mark on open-source while accelerating your growth as a machine learning engineer. +

+
+ +
+
+
+
+
+
+ +
+ +
+
+ + {/* STEP 2 */} +
+
+
+

Hackathons

+

+ Participate in global hackathons, workshops, and collaborative tech events to sharpen your skills. + Build real-world AI solutions, compete with top innovators, and gain hands-on industry experience. + Showcase your talent, expand your network, and turn ideas into impactful projects. +

+
+ +
+
+
+
+
+
+ +
+ +
+
+ + {/* STEP 3 */} +
+
+
+

+ Data Science & Much More +

+

+ Learn AI, data science, deep learning, MLOps, and many more industry-ready technologies. + Master modern tools, frameworks, and workflows used by top tech companies. + Transform your learning into deployable solutions and job-ready expertise. +

+
+ +
+
+
+
+
+
+ +
+ +
+
+
+ + {/* Button */} + +
+
+ ); +}; + +export default WhatWeDo; diff --git a/src/app/form/page.tsx b/src/app/form/page.tsx index 0ade393..70bd499 100644 --- a/src/app/form/page.tsx +++ b/src/app/form/page.tsx @@ -107,11 +107,12 @@ const AchievementForm: React.FC = () => { />
-
+

Submit Your Achievement

diff --git a/src/app/globals.css b/src/app/globals.css index 5b8fc67..625f800 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -34,12 +34,13 @@ body { font-style: normal; } } + @layer utilities { -.special-font b { + .special-font b { font-family: "Zentry"; font-feature-settings: "ss01" on; } -} +} /* === Animated Background Helpers === */ @@ -49,10 +50,12 @@ body { opacity: 0.34; transform: scale(1); } + 50% { opacity: 0.46; transform: scale(1.02); } + 100% { opacity: 0.34; transform: scale(1); @@ -69,9 +72,44 @@ body { } /* apply gentle breathing to radial lights */ -.pointer-events-none > .breath { +.pointer-events-none>.breath { animation: soft-breath 5.5s ease-in-out infinite; } -html { - scroll-behavior: smooth; + +/* Border Animation */ +@property --angle { + syntax: ""; + initial-value: 0deg; + inherits: false; +} + +@keyframes spin { + from { + --angle: 0deg; + } + + to { + --angle: 360deg; + } +} + +.animate-border::after, +.animate-border::before { + content: ''; + position: absolute; + inset: -5px; + /* Extends beyond the container */ + background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545); + top: 50%; + left: 50%; + translate: -50% -50%; + z-index: -1; + border-radius: inherit; + /* Inherits rounded-3xl from parent */ + animation: 3s spin linear infinite; +} + +.animate-border::before { + filter: blur(1.5rem); + opacity: 0.5; } \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 76e9b11..b7e7325 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -import { roboto,orbitron } from "./font"; +import { roboto, orbitron } from "./font"; import Footer from "./components/Footer"; @@ -28,10 +28,11 @@ export default function RootLayout({ return ( {children} -