online resources

This commit is contained in:
Tom Mathew
2026-01-11 23:31:49 +05:30
parent 1b2a7ab06e
commit bc90612b27
5 changed files with 467 additions and 21 deletions

49
package-lock.json generated
View File

@@ -15,7 +15,8 @@
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.9.1",
"cloudinary": "^2.7.0",
"framer-motion": "^12.23.24",
"clsx": "^2.1.1",
"framer-motion": "^12.25.0",
"gl-matrix": "^3.4.4",
"gsap": "^3.13.0",
"lucide-react": "^0.548.0",
@@ -27,7 +28,8 @@
"react-dom": "19.1.0",
"react-icons": "^5.5.0",
"react-type-animation": "^3.2.0",
"react-typed": "^2.0.12"
"react-typed": "^2.0.12",
"tailwind-merge": "^3.4.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
@@ -3436,6 +3438,15 @@
"node": ">=9"
}
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4500,13 +4511,13 @@
}
},
"node_modules/framer-motion": {
"version": "12.23.24",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
"integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
"version": "12.25.0",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.25.0.tgz",
"integrity": "sha512-mlWqd0rApIjeyhTCSNCqPYsUAEhkcUukZxH3ke6KbstBRPcxhEpuIjmiUQvB+1E9xkEm5SpNHBgHCapH/QHTWg==",
"license": "MIT",
"dependencies": {
"motion-dom": "^12.23.23",
"motion-utils": "^12.23.6",
"motion-dom": "^12.24.11",
"motion-utils": "^12.24.10",
"tslib": "^2.4.0"
},
"peerDependencies": {
@@ -6069,18 +6080,18 @@
}
},
"node_modules/motion-dom": {
"version": "12.23.23",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
"integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
"version": "12.24.11",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.24.11.tgz",
"integrity": "sha512-DlWOmsXMJrV8lzZyd+LKjG2CXULUs++bkq8GZ2Sr0R0RRhs30K2wtY+LKiTjhmJU3W61HK+rB0GLz6XmPvTA1A==",
"license": "MIT",
"dependencies": {
"motion-utils": "^12.23.6"
"motion-utils": "^12.24.10"
}
},
"node_modules/motion-utils": {
"version": "12.23.6",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
"version": "12.24.10",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.24.10.tgz",
"integrity": "sha512-x5TFgkCIP4pPsRLpKoI86jv/q8t8FQOiM/0E8QKBzfMozWHfkKap2gA1hOki+B5g3IsBNpxbUnfOum1+dgvYww==",
"license": "MIT"
},
"node_modules/mpath": {
@@ -7454,6 +7465,16 @@
"react": ">=17.0"
}
},
"node_modules/tailwind-merge": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
"integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwindcss": {
"version": "4.1.14",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",

View File

@@ -16,7 +16,8 @@
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.9.1",
"cloudinary": "^2.7.0",
"framer-motion": "^12.23.24",
"clsx": "^2.1.1",
"framer-motion": "^12.25.0",
"gl-matrix": "^3.4.4",
"gsap": "^3.13.0",
"lucide-react": "^0.548.0",
@@ -28,7 +29,8 @@
"react-dom": "19.1.0",
"react-icons": "^5.5.0",
"react-type-animation": "^3.2.0",
"react-typed": "^2.0.12"
"react-typed": "^2.0.12",
"tailwind-merge": "^3.4.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",

View File

@@ -1,5 +0,0 @@
export default function OnlineResourcesPage() {
return (
<h1 className="text-center text-black mt-20">Online Resources Page</h1>
);
}

View File

@@ -0,0 +1,300 @@
"use client";
import React, { useState, useRef } from "react";
import {
BookOpen,
Youtube,
ExternalLink,
Download,
PlayCircle,
X,
FileText
} from "lucide-react";
import Navbar from "../components/Navbar";
import { motion, AnimatePresence } from "framer-motion";
import NeuralBackground from "@/app/components/NeuralBackground";
import { resources, ResourceItem } from "../../data/resources"; // Import the data
// --- 1. Custom Bento Card ---
interface BentoCardProps {
item: ResourceItem;
onClick: () => void;
}
const BentoCard = ({ item, onClick }: BentoCardProps) => {
const divRef = useRef<HTMLDivElement>(null);
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!divRef.current) return;
const rect = divRef.current.getBoundingClientRect();
setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
};
return (
<motion.div
layoutId={item.id}
ref={divRef}
onClick={onClick}
onMouseMove={handleMouseMove}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: "easeOut" }}
whileHover={{ scale: 1.02, boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.5)" }}
className={`relative overflow-hidden rounded-3xl border border-slate-800 bg-gradient-to-br from-[#0b0d14] to-[#050608] group cursor-pointer ${item.span}`}
>
{/* Animated gradient overlay */}
<motion.div
className="absolute inset-0 opacity-0 group-hover:opacity-20 transition-opacity duration-500"
style={{
background: `linear-gradient(135deg, ${item.color.replace('rgb', 'rgba').replace(')', ', 0.2)')}, transparent 70%)`,
}}
/>
{/* Spotlight Effect */}
<motion.div
className="pointer-events-none absolute -inset-px opacity-0 transition duration-300 group-hover:opacity-100 z-10"
style={{
background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${item.color.replace('rgb', 'rgba').replace(')', ', 0.15)')}, transparent 40%)`,
}}
/>
<motion.div
className="pointer-events-none absolute -inset-px rounded-3xl opacity-0 transition duration-300 group-hover:opacity-100 z-10"
style={{
background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${item.color}, transparent 40%)`,
maskImage: "linear-gradient(black, black) content-box, linear-gradient(black, black)",
WebkitMaskImage: "linear-gradient(black, black) content-box, linear-gradient(black, black)",
maskComposite: "exclude",
WebkitMaskComposite: "xor",
padding: "2px",
}}
/>
{/* Card Content */}
<div className="relative h-full p-6 flex flex-col justify-between z-0 transition-all duration-300 group-hover:blur-[2px] group-hover:opacity-40">
<div className="flex justify-between items-start">
<motion.div
className="w-12 h-12 rounded-2xl flex items-center justify-center border border-white/10 shadow-lg"
style={{ backgroundColor: item.color.replace('rgb', 'rgba').replace(')', ', 0.15)') }}
whileHover={{ scale: 1.1, rotate: 5 }}
transition={{ type: "spring", stiffness: 400, damping: 10 }}
>
{item.type === 'book' ? (
<BookOpen size={24} style={{ color: item.color }} />
) : (
<Youtube size={24} style={{ color: item.color }} />
)}
</motion.div>
<motion.div whileHover={{ scale: 1.2, opacity: 1 }} transition={{ duration: 0.2 }}>
<ExternalLink className="w-5 h-5 text-slate-600 group-hover:text-slate-400 transition-colors" />
</motion.div>
</div>
<div>
<h3 className="text-xl font-bold text-slate-100 mb-1 leading-tight group-hover:text-white transition-colors">{item.title}</h3>
<p className="text-xs font-mono text-slate-400 mb-2 group-hover:text-slate-300 transition-colors">{item.author}</p>
<div className="flex items-center gap-2">
<span className="text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-slate-800 text-slate-400 border border-slate-700">
{item.type === 'book' ? 'PDF' : 'Playlist'}
</span>
</div>
</div>
</div>
{/* Overlay (Appears on Hover) */}
<motion.div
className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20"
initial={{ opacity: 0 }}
whileHover={{ opacity: 1 }}
>
<motion.div
className="px-6 py-3 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white font-bold flex items-center gap-2 shadow-2xl"
initial={{ scale: 0.8, y: 10 }}
whileHover={{ scale: 1, y: 0 }}
transition={{ type: "spring", stiffness: 400, damping: 15 }}
>
{item.type === 'book' ? <BookOpen size={18} /> : <PlayCircle size={18} />}
<span>{item.type === 'book' ? "Read Now" : "Watch Now"}</span>
</motion.div>
</motion.div>
</motion.div>
);
};
// --- 2. Resource Modal ---
interface ResourceModalProps {
resource: ResourceItem;
onClose: () => void;
}
const ResourceModal = ({ resource, onClose }: ResourceModalProps) => {
if (!resource) return null;
return (
<motion.div
className="fixed inset-0 z-[100] flex items-center justify-center px-4"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
onClick={onClose}
className="absolute inset-0 bg-black/80 backdrop-blur-xl"
/>
<motion.div
layoutId={resource.id}
initial={{ scale: 0.9, opacity: 0, y: 20 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
exit={{ scale: 0.9, opacity: 0, y: 20 }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="relative w-full max-w-lg bg-gradient-to-br from-[#0f111a] to-[#050608] border-2 border-slate-700 rounded-3xl p-8 shadow-2xl overflow-hidden z-50"
>
{/* Animated background gradient */}
<motion.div
className="absolute inset-0 opacity-10"
animate={{
background: [
`radial-gradient(circle at 0% 0%, ${resource.color}, transparent 50%)`,
`radial-gradient(circle at 100% 100%, ${resource.color}, transparent 50%)`,
`radial-gradient(circle at 0% 0%, ${resource.color}, transparent 50%)`,
]
}}
transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
/>
<motion.button
onClick={onClose}
className="absolute top-4 right-4 p-2 text-slate-400 hover:text-white bg-white/5 hover:bg-white/10 rounded-full z-10 transition-colors"
whileHover={{ scale: 1.1, rotate: 90 }}
whileTap={{ scale: 0.9 }}
>
<X size={20} />
</motion.button>
<div className="flex flex-col gap-5 relative z-10">
<motion.div
className="w-16 h-16 rounded-2xl flex items-center justify-center border border-white/10 bg-slate-800/50 shadow-lg"
initial={{ scale: 0, rotate: -180 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 15, delay: 0.1 }}
style={{ backgroundColor: resource.color.replace('rgb', 'rgba').replace(')', ', 0.15)') }}
>
{resource.type === 'book' ? <FileText size={32} style={{ color: resource.color }} /> : <Youtube size={32} style={{ color: resource.color }} />}
</motion.div>
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2 }}
>
<h2 className="text-3xl font-bold text-white mb-2">{resource.title}</h2>
<p className="text-sm text-slate-400 font-mono">{resource.author}</p>
</motion.div>
<motion.div
className="p-5 rounded-2xl bg-slate-900/50 backdrop-blur-sm border border-slate-800 text-slate-300 text-sm leading-relaxed"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
>
{resource.description}
</motion.div>
<motion.div
className="flex gap-3 mt-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
>
{/* Primary Action: Read or Watch */}
<motion.a
href={resource.link}
target="_blank"
rel="noreferrer"
className="flex-1 flex items-center justify-center gap-2 bg-slate-100 text-black font-bold py-3 rounded-xl hover:bg-white transition-all shadow-lg"
whileHover={{ scale: 1.05, boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.3)" }}
whileTap={{ scale: 0.95 }}
>
{resource.type === 'book' ? <BookOpen size={18} /> : <PlayCircle size={18} />}
{resource.type === 'book' ? 'Read Now' : 'Watch on YouTube'}
</motion.a>
{/* Secondary Action: Download (Only for books) */}
{resource.type === 'book' && resource.downloadUrl && (
<motion.a
href={resource.downloadUrl}
download
className="px-5 bg-slate-800 text-white rounded-xl border border-slate-700 hover:bg-slate-700 flex items-center justify-center transition-colors"
title="Download PDF"
whileHover={{ scale: 1.1, rotate: 5 }}
whileTap={{ scale: 0.9 }}
>
<Download size={20} />
</motion.a>
)}
</motion.div>
</div>
</motion.div>
</motion.div>
);
};
// --- 3. Main Page Component ---
export default function OnlineResources() {
const [selectedResource, setSelectedResource] = useState<ResourceItem | null>(null);
return (
<main className="relative min-h-screen w-full bg-[#020617] text-slate-200">
<NeuralBackground />
<Navbar />
{/* FOOTER REMOVAL HACK */}
<style jsx global>{`
footer, .footer, [data-testid="footer"] { display: none !important; }
`}</style>
<div className="relative z-10 pt-32 pb-20 px-4 sm:px-8 pl-24 md:pl-32 max-w-7xl mx-auto">
{/* Header */}
<motion.div
className="mb-12"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: "easeOut" }}
>
<h1 className="text-4xl md:text-6xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-200 to-slate-400 mb-4">
Library
</h1>
<p className="text-slate-400 text-lg max-w-xl">
Essential readings and curated playlists for the ML4E team.
</p>
</motion.div>
{/* BENTO GRID LAYOUT */}
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[180px]">
{resources.map((res) => (
<BentoCard
key={res.id}
item={res}
onClick={() => setSelectedResource(res)}
/>
))}
</div>
</div>
{/* Modal Overlay */}
<AnimatePresence mode="wait">
{selectedResource && (
<ResourceModal
resource={selectedResource}
onClose={() => setSelectedResource(null)}
/>
)}
</AnimatePresence>
</main>
);
}

128
src/data/resources.ts Normal file
View File

@@ -0,0 +1,128 @@
// src/data/resources.ts
export interface ResourceItem {
id: string;
title: string;
author: string;
type: "book" | "video";
size?: string;
description: string;
link: string;
downloadUrl?: string;
color: string;
span: string;
}
export const resources: ResourceItem[] = [
// --- BOOKS (4 Items) ---
{
id: "book-math",
title: "Mathematics for Machine Learning",
author: "Deisenroth, Faisal, Ong",
type: "book",
size: "17 MB",
description: "The fundamental mathematical tools needed to understand machine learning.",
link: "/books/mathematics-for-machine-learning.pdf",
downloadUrl: "/books/mathematics-for-machine-learning.pdf",
color: "rgb(132, 0, 255)", // Purple
span: "md:col-span-1 md:row-span-2",
},
{
id: "book-bishop",
title: "Pattern Recognition & ML",
author: "Christopher Bishop",
type: "book",
size: "17 MB",
description: "A comprehensive guide to pattern recognition. The classic textbook.",
link: "/books/pattern-recognition-and-machine-learning.pdf",
downloadUrl: "/books/pattern-recognition-and-machine-learning.pdf",
color: "rgb(6, 182, 212)", // Cyan
span: "md:col-span-1 md:row-span-2",
},
{
id: "book-geron",
title: "Hands-On Machine Learning",
author: "Aurélien Géron",
type: "book",
size: "19 MB",
description: "Learn Scikit-Learn, Keras, and TensorFlow with practical examples.",
link: "/books/hands-on-machine-learning.pdf",
downloadUrl: "/books/hands-on-machine-learning.pdf",
color: "rgb(255, 165, 0)", // Orange
span: "md:col-span-1 md:row-span-2",
},
{
id: "book-goodfellow",
title: "Deep Learning",
author: "Ian Goodfellow et al.",
type: "book",
size: "25 MB",
description: "The Bible of Deep Learning. Covers theoretical foundations and modern architectures.",
link: "/books/deep-learning.pdf",
downloadUrl: "/books/deep-learning.pdf",
color: "rgb(236, 72, 153)", // Pink
span: "md:col-span-1 md:row-span-2",
},
// --- VIDEOS (6 Items) ---
{
id: "vid-custom",
title: "ML Essentials Playlist",
author: "Rishi Das (NITR)",
type: "video",
description: "Curated collection of essential lectures for the team.",
link: "https://youtube.com/playlist?list=PLKnIA16_Rmvbr7zKYQuBfsVkjoLcJgxHH&si=gRTfZe-hSD7WySmJ",
color: "rgb(59, 130, 246)", // Blue
span: "md:col-span-2 md:row-span-1",
},
{
id: "vid-karpathy",
title: "Neural Networks: Zero to Hero",
author: "Andrej Karpathy",
type: "video",
description: "The best deep learning course available online. Builds everything from scratch.",
link: "https://youtube.com/playlist?list=PLAqhIrjkxbuWI23v9cThsA9GvCAUhRvKZ&si=2kNG0A4Au3P4FFGu",
color: "rgb(239, 68, 68)", // Red
span: "md:col-span-1 md:row-span-1",
},
{
id: "vid-cs229",
title: "CS229: Machine Learning",
author: "Stanford University",
type: "video",
description: "The legendary course that started it all. Deep dive into theory.",
link: "https://youtube.com/playlist?list=PLoROMvodv4rMFqRtEuo6SGjY4XbRIVRd4&si=Dxd5SNKqosiMF43I",
color: "rgb(16, 185, 129)", // Emerald
span: "md:col-span-1 md:row-span-1",
},
{
id: "vid-cs230",
title: "CS230: Deep Learning",
author: "Stanford University",
type: "video",
description: "Learn the foundations of Deep Learning, understand how to build neural networks.",
link: "https://youtube.com/playlist?list=PLoROMvodv4rPLKxIpqhjhPgdQy7imNkDn&si=vYrxzQmrpR9mdeap",
color: "rgb(139, 92, 246)", // Violet
span: "md:col-span-2 md:row-span-1",
},
{
id: "vid-huggingface",
title: "Hugging Face Course",
author: "Hugging Face",
type: "video",
description: "Master NLP and Transformers using the Hugging Face ecosystem.",
link: "https://youtube.com/playlist?list=PLqzoL9-eJTNBZDG8jaNuhap1C9q6VHyVa&si=RQ8G8NEnshebHShB",
color: "rgb(250, 204, 21)", // Yellow
span: "md:col-span-1 md:row-span-1",
},
{
id: "vid-cs231n",
title: "CS231n: Vision",
author: "Stanford University",
type: "video",
description: "Convolutional Neural Networks for Visual Recognition.",
link: "https://youtube.com/playlist?list=PLC1qU-LWwrF64f4QKQT-Vg5Wr4qEE1Zxk&si=_fL7EVbhxugqrQiP",
color: "rgb(236, 72, 153)", // Pink
span: "md:col-span-1 md:row-span-1",
}
];