Ctrl+K
-
1.52 kB
initial commit
-
206 Bytes
import React, { useEffect, useRef, useState } from "react"; function Starfield2D({ count = 600 }) { const ref = useRef(null); const animationRef = useRef(0); const starsRef = useRef([]); useEffect(() => { const canvas = ref.current; const ctx = canvas.getContext("2d"); let w = (canvas.width = canvas.offsetWidth); let h = (canvas.height = canvas.offsetHeight); const makeStars = () => { const arr = []; for (let i = 0; i < count; i++) { arr.push({ x: Math.random() * w - w / 2, y: Math.random() * h - h / 2, z: Math.random() * w, s: Math.random() * 1.2 + 0.2 }); } starsRef.current = arr; }; makeStars(); const onResize = () => { w = canvas.width = canvas.offsetWidth; h = canvas.height = canvas.offsetHeight; makeStars(); }; const draw = () => { ctx.clearRect(0, 0, w, h); ctx.fillStyle = "#ffffff"; for (const star of starsRef.current) { star.z -= 0.7; if (star.z <= 1) star.z = w; const k = 128 / star.z; const px = star.x * k + w / 2; const py = star.y * k + h / 2; if (px < 0 || px >= w || py < 0 || py >= h) continue; const size = star.s * k; ctx.globalAlpha = Math.min(1, 0.2 + k * 0.5); ctx.beginPath(); ctx.arc(px, py, size, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; animationRef.current = requestAnimationFrame(draw); }; animationRef.current = requestAnimationFrame(draw); window.addEventListener("resize", onResize); return () => { cancelAnimationFrame(animationRef.current); window.removeEventListener("resize", onResize); }; }, [count]); return <canvas ref={ref} className="w-full h-full" />; } function SpinningKnot2D() { const ref = useRef(null); const angleRef = useRef(0); useEffect(() => { const el = ref.current; let id = 0; const tick = () => { angleRef.current += 0.0025 * 60 / 60; el.style.transform = `translate(-50%, -50%) rotate(${angleRef.current}rad)`; id = requestAnimationFrame(tick); }; id = requestAnimationFrame(tick); return () => cancelAnimationFrame(id); }, []); return ( <svg ref={ref} viewBox="0 0 100 100" className="absolute left-1/2 top-1/2 w-[420px] h-[420px] opacity-80" style={{ transform: "translate(-50%, -50%)" }}> <defs> <radialGradient id="g" cx="50%" cy="50%" r="60%"> <stop offset="0%" stopColor="#e8f1ff" /> <stop offset="100%" stopColor="#7aa7ff" /> </radialGradient> </defs> <path d="M50 10c22 0 40 18 40 40s-18 40-40 40S10 72 10 50 28 10 50 10zm0 10c-16.6 0-30 13.4-30 30s13.4 30 30 30 30-13.4 30-30S66.6 20 50 20z" fill="url(#g)" fillOpacity="0.35" stroke="#c9dcff" strokeWidth="1.5" /> <path d="M20 50c0-16.6 13.4-30 30-30 12 0 22.3 7 27 17.2-5.8 3.6-12.7 5.8-20.1 5.8-20.4 0-37-15.2-36.9-33 0 0-0.1 0.4-0.1 0.6 0 21.5 13.8 39.4 32.3 44.9C38.9 59.6 29.2 56 22 49.8 20.7 49.2 20 49.6 20 50z" fill="#a6c8ff" fillOpacity="0.5" /> </svg> ); } function Section({ id, title, children }) { return ( <section id={id} className="relative max-w-6xl mx-auto px-6 md:px-10 py-20 md:py-28"> <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-8 bg-gradient-to-r from-yellow-200 to-amber-400 bg-clip-text text-transparent">{title}</h2> {children} </section> ); } function ParallaxHero() { const [parallax, setParallax] = useState({ y: 0, scale: 1 }); useEffect(() => { const onScroll = () => { const y = Math.max(-120, -window.scrollY * 0.15); const scale = 1 + Math.min(0.06, (window.scrollY / 800) * 0.06); setParallax({ y, scale }); }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( <div className="relative h-[88vh] w-full overflow-hidden"> <div className="absolute inset-0"> <Starfield2D /> <SpinningKnot2D /> </div> <div style={{ transform: `translateY(${parallax.y}px) scale(${parallax.scale})` }} className="relative h-full flex items-center will-change-transform"> <div className="max-w-6xl mx-auto px-6 md:px-10 grid md:grid-cols-[1fr,1.2fr] gap-8 md:gap-16"> <div className="bg-white/5 border border-white/10 rounded-2xl p-6 md:p-8 shadow-2xl"> <div className="flex items-center gap-4"> <img src="https://pranavgupta2603.github.io/new_images/pfp.jpg" alt="Pranav Gupta" className="w-20 h-20 md:w-24 md:h-24 rounded-xl object-cover ring-1 ring-white/15" loading="eager" /> <div> <h1 className="text-3xl md:text-5xl font-bold tracking-tight">Pranav Gupta</h1> <p className="opacity-80 mt-1 text-sm md:text-base">Multimodal AI • Vision+Language • Generative Models</p> </div> </div> <p className="mt-6 leading-7 opacity-90">Master’s student (incoming) in CSE at the University of Michigan, Ann Arbor. I build multimodal systems and study natural-language supervision for vision tasks.</p> <div className="mt-6 flex flex-wrap gap-3"> <a href="#publications" className="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15">Publications</a> <a href="#projects" className="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15">Projects</a> <a href="#contact" className="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15">Contact</a> </div> </div> <div className="hidden md:block" /> </div> </div> <div className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-[#06080d] to-transparent" /> </div> ); } export default function Portfolio() { return ( <div className="text-white bg-[#06080d] selection:bg-amber-300/30 selection:text-white"> <ParallaxHero /> <Section id="about" title="About"> <div className="grid md:grid-cols-[1.1fr,1fr] gap-8 items-start"> <div className="space-y-4 text-lg/7 opacity-90"> <p>I will be starting my Master’s in CSE at the University of Michigan, Ann Arbor. My research interests revolve around <strong>Multimodal AI</strong> and natural language supervision in vision tasks. I’m currently a Research Intern at Stanford’s PanLab working on multimodal AI in neuroimaging, and I also intern at <strong>DREAM:Lab (IISc)</strong> on deep learning for edge accelerators.</p> <p>Past stints include Samsung, Upthrust, and AarogyaAI on research and data science projects.</p> <div className="flex gap-4 pt-2 flex-wrap"> <a className="underline underline-offset-4 hover:opacity-80" href="https://github.com/pranavgupta2603" target="_blank" rel="noreferrer">GitHub</a> <a className="underline underline-offset-4 hover:opacity-80" href="https://scholar.google.com" target="_blank" rel="noreferrer">Google Scholar</a> <a className="underline underline-offset-4 hover:opacity-80" href="https://x.com/pranavgupta2603" target="_blank" rel="noreferrer">X/Twitter</a> <a className="underline underline-offset-4 hover:opacity-80" href="https://www.linkedin.com" target="_blank" rel="noreferrer">LinkedIn</a> <a className="underline underline-offset-4 hover:opacity-80" href="#contact">Email</a> </div> </div> <div className="grid grid-cols-2 gap-4"> <img src="https://pranavgupta2603.github.io/new_images/teaser_image.png" alt="ViDAS" className="rounded-2xl border border-white/10" /> <img src="https://pranavgupta2603.github.io/new_images/samsung.png" alt="ECHO" className="rounded-2xl border border-white/10" /> <img src="https://pranavgupta2603.github.io/new_images/isaap.png" alt="ISAApp" className="rounded-2xl border border-white/10 col-span-2" /> </div> </div> </Section> <Section id="publications" title="Publications"> <div className="grid md:grid-cols-2 gap-6"> <Pub image="https://pranavgupta2603.github.io/new_images/teaser_image.png" title="ViDAS: Vision-based Danger Assessment and Scoring" venue="ICVGIP 2024" links={[{ label: "ACM DL", href: "https://dl.acm.org" }]}>Human-like danger assessment from videos with LLM-based reasoning and failures on subtle cues.</Pub> <Pub image="https://pranavgupta2603.github.io/new_images/samsung.png" title="ECHO: Environmental Sound Classification With Hierarchical Ontology-Guided SSL" venue="IEEE CONECCT 2024" links={[{ label: "IEEE Xplore", href: "https://ieeexplore.ieee.org" }]}>Label-ontology guided pretext tasks improve audio classification via semi-supervised learning.</Pub> <Pub image="https://pranavgupta2603.github.io/new_images/isaap.png" title="ISAApp – Image Based Smart Attendance" venue="AAIMB 2023" links={[{ label: "Springer", href: "https://link.springer.com" }]}>A camera-first pipeline for attendance with privacy-preserving data flows.</Pub> <Pub image="https://pranavgupta2603.github.io/new_images/managingcongregations.png" title="Managing Congregations by Predicting Infection Likelihood (COVID)" venue="IEEE CCEM 2020" links={[{ label: "IEEE Xplore", href: "https://ieeexplore.ieee.org" }]}>Graph-based proximity modeling to estimate contagion transfer risk in gatherings.</Pub> </div> </Section> <Section id="projects" title="Selected Projects"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <Card title="AI Wordle Solver" href="https://github.com/pranavgupta2603" note="Vision + heuristic search">Predict the next best word by parsing a screenshot of a partially-filled Wordle.</Card> <Card title="Search Browser History GPT" href="https://github.com/pranavgupta2603" note="RAG on local history">Query your search history content semantically to jump to the right page.</Card> <Card title="Splitwise GPT Vision" href="https://github.com/pranavgupta2603" note="Doc parsing">Parse a bill image and auto-create Splitwise entries end-to-end.</Card> <Card title="Genetic Handwritten Digits" href="https://github.com/pranavgupta2603" note="NAS with GA">Evolve CNN kernels and pooling to optimize MNIST classification.</Card> <Card title="Face Recognition LFW" href="https://github.com/pranavgupta2603" note="SVM on FaceNet">One-vs-all and one-vs-one SVMs using FaceNet embeddings on LFW.</Card> <Card title="CLIP / SimCLR / MusicLM" href="https://github.com/pranavgupta2603" note="Paper repos">Clean PyTorch/TensorFlow implementations for core vision & audio papers.</Card> </div> </Section> <Section id="orgs" title="Organizations & Leadership"> <div className="grid md:grid-cols-2 gap-6"> <Org logo="https://pranavgupta2603.github.io/new_images/ol.jpeg" name="Odyssey Lab" role="Co-Founder" blurb="Research collective with 15 students & mentors across IISc, IIT, IBM, and IIIT-Hyderabad." link="#" /> <Org logo="https://pranavgupta2603.github.io/new_images/ntl.webp" name="Next Tech Lab" role="Syndicate – Head AI Researcher" blurb="Led >40 ML projects; organized 20+ workshops for 50+ students." link="https://nexttechlab.in" /> </div> </Section> <Section id="contact" title="Contact"> <div className="grid md:grid-cols-[1.2fr,1fr] gap-6 items-center"> <div className="space-y-4"> <p className="opacity-90">Open to research collaborations in multimodal reasoning, video understanding, and VLMs. Always happy to chat.</p> <div className="flex flex-wrap gap-3"> <a href="mailto:[email protected]" className="px-4 py-2 rounded-full bg-amber-400 text-black hover:bg-amber-300 font-medium">Email me</a> <a href="https://x.com/pranavgupta2603" target="_blank" rel="noreferrer" className="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15">X/Twitter</a> <a href="https://github.com/pranavgupta2603" target="_blank" rel="noreferrer" className="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15">GitHub</a> </div> </div> <div className="border border-white/10 rounded-2xl p-6 bg-white/5"> <p className="text-sm opacity-70">pranavgupta2603 at gmail dot com</p> <p className="text-sm opacity-70">New Delhi, India → Ann Arbor, MI</p> </div> </div> </Section> <footer className="text-center py-12 opacity-60 text-sm">© {new Date().getFullYear()} Pranav Gupta</footer> </div> ); } function Pub({ image, title, venue, children, links = [] }) { return ( <div className="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5"> <div className="aspect-[16/9] overflow-hidden"> <img src={image} alt={title} className="w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-300" /> </div> <div className="p-5"> <h3 className="text-lg md:text-xl font-semibold">{title}</h3> <p className="text-amber-300/90 text-sm mt-1">{venue}</p> <p className="opacity-80 text-sm mt-3">{children}</p> <div className="flex gap-3 mt-4 flex-wrap"> {links.map((l, i) => ( <a key={i} className="text-sm underline underline-offset-4 hover:opacity-80" href={l.href} target="_blank" rel="noreferrer">{l.label}</a> ))} </div> </div> </div> ); } function Card({ title, href, children, note }) { return ( <a href={href} target="_blank" rel="noreferrer" className="block group rounded-2xl border border-white/10 bg-white/5 p-5 hover:bg-white/[0.08] transition-colors"> <div className="flex items-start justify-between gap-4"> <h3 className="text-lg font-semibold">{title}</h3> {note && <span className="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10">{note}</span>} </div> <p className="opacity-80 text-sm mt-2">{children}</p> <div className="mt-3 text-sm underline underline-offset-4 opacity-80 group-hover:opacity-100">View →</div> </a> ); } function Org({ logo, name, role, blurb, link }) { return ( <a href={link} target="_blank" rel="noreferrer" className="flex gap-4 p-5 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/[0.08] transition-colors"> <img src={logo} alt={name} className="w-14 h-14 rounded-xl object-cover ring-1 ring-white/10" /> <div> <h3 className="text-xl font-semibold">{name}</h3> <p className="text-amber-300/90 text-sm">{role}</p> <p className="opacity-80 text-sm mt-2">{blurb}</p> </div> </a> ); } - Initial Deployment
-
22.5 kB
change the emails everwhere to [email protected] - Follow Up Deployment
-
388 Bytes
initial commit