|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Pranav Gupta - Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
canvas { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: 0; |
|
|
} |
|
|
.gradient-text { |
|
|
background-clip: text; |
|
|
-webkit-background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.parallax-content { |
|
|
will-change: transform; |
|
|
} |
|
|
.star { |
|
|
position: absolute; |
|
|
background-color: white; |
|
|
border-radius: 50%; |
|
|
will-change: transform; |
|
|
} |
|
|
.knot { |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
top: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 420px; |
|
|
height: 420px; |
|
|
opacity: 0.8; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.knot { |
|
|
width: 280px; |
|
|
height: 280px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-white bg-[#06080d] selection:bg-amber-300/30 selection:text-white"> |
|
|
|
|
|
<div class="relative h-[88vh] w-full overflow-hidden"> |
|
|
|
|
|
<canvas id="starfield" class="absolute inset-0 w-full h-full"></canvas> |
|
|
|
|
|
|
|
|
<svg id="spinning-knot" viewBox="0 0 100 100" class="knot"> |
|
|
<defs> |
|
|
<radialGradient id="g" cx="50%" cy="50%" r="60%"> |
|
|
<stop offset="0%" stop-color="#e8f1ff" /> |
|
|
<stop offset="100%" stop-color="#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)" fill-opacity="0.35" stroke="#c9dcff" stroke-width="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" fill-opacity="0.5" /> |
|
|
</svg> |
|
|
|
|
|
|
|
|
<div id="parallax-content" class="relative h-full flex items-center"> |
|
|
<div class="max-w-6xl mx-auto px-6 md:px-10 grid md:grid-cols-[1fr,1.2fr] gap-8 md:gap-16"> |
|
|
<div class="bg-white/5 border border-white/10 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-sm"> |
|
|
<div class="flex items-center gap-4"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/pfp.jpg" alt="Pranav Gupta" class="w-20 h-20 md:w-24 md:h-24 rounded-xl object-cover ring-1 ring-white/15" loading="eager"> |
|
|
<div> |
|
|
<h1 class="text-3xl md:text-5xl font-bold tracking-tight">Pranav Gupta</h1> |
|
|
<p class="opacity-80 mt-1 text-sm md:text-base">Multimodal AI • Vision+Language • Generative Models</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="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 class="mt-6 flex flex-wrap gap-3"> |
|
|
<a href="#publications" class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 transition-colors">Publications</a> |
|
|
<a href="#projects" class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 transition-colors">Projects</a> |
|
|
<a href="#contact" class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 transition-colors">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-[#06080d] to-transparent"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="about" class="relative max-w-6xl mx-auto px-6 md:px-10 py-20 md:py-28"> |
|
|
<h2 class="text-3xl md:text-5xl font-semibold tracking-tight mb-8 gradient-text bg-gradient-to-r from-yellow-200 to-amber-400">About</h2> |
|
|
<div class="grid md:grid-cols-[1.1fr,1fr] gap-8 items-start"> |
|
|
<div class="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 class="text-amber-300">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 class="text-amber-300">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 class="flex gap-4 pt-2 flex-wrap"> |
|
|
<a class="underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer">GitHub</a> |
|
|
<a class="underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://scholar.google.com" target="_blank" rel="noopener noreferrer">Google Scholar</a> |
|
|
<a class="underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://x.com/pranavgupta2603" target="_blank" rel="noopener noreferrer">X/Twitter</a> |
|
|
<a class="underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a> |
|
|
<a class="underline underline-offset-4 hover:opacity-80 transition-opacity" href="#contact">Email</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/teaser_image.png" alt="ViDAS" class="rounded-2xl border border-white/10 hover:scale-[1.02] transition-transform duration-300"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/samsung.png" alt="ECHO" class="rounded-2xl border border-white/10 hover:scale-[1.02] transition-transform duration-300"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/isaap.png" alt="ISAApp" class="rounded-2xl border border-white/10 col-span-2 hover:scale-[1.02] transition-transform duration-300"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="publications" class="relative max-w-6xl mx-auto px-6 md:px-10 py-20 md:py-28"> |
|
|
<h2 class="text-3xl md:text-5xl font-semibold tracking-tight mb-8 gradient-text bg-gradient-to-r from-yellow-200 to-amber-400">Publications</h2> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 transition-colors"> |
|
|
<div class="aspect-[16/9] overflow-hidden"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/teaser_image.png" alt="ViDAS" class="w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-300"> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg md:text-xl font-semibold">ViDAS: Vision-based Danger Assessment and Scoring</h3> |
|
|
<p class="text-amber-300/90 text-sm mt-1">ICVGIP 2024</p> |
|
|
<p class="opacity-80 text-sm mt-3">Human-like danger assessment from videos with LLM-based reasoning and failures on subtle cues.</p> |
|
|
<div class="flex gap-3 mt-4 flex-wrap"> |
|
|
<a class="text-sm underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://dl.acm.org" target="_blank" rel="noopener noreferrer">ACM DL</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 transition-colors"> |
|
|
<div class="aspect-[16/9] overflow-hidden"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/samsung.png" alt="ECHO" class="w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-300"> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg md:text-xl font-semibold">ECHO: Environmental Sound Classification With Hierarchical Ontology-Guided SSL</h3> |
|
|
<p class="text-amber-300/90 text-sm mt-1">IEEE CONECCT 2024</p> |
|
|
<p class="opacity-80 text-sm mt-3">Label-ontology guided pretext tasks improve audio classification via semi-supervised learning.</p> |
|
|
<div class="flex gap-3 mt-4 flex-wrap"> |
|
|
<a class="text-sm underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://ieeexplore.ieee.org" target="_blank" rel="noopener noreferrer">IEEE Xplore</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 transition-colors"> |
|
|
<div class="aspect-[16/9] overflow-hidden"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/isaap.png" alt="ISAApp" class="w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-300"> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg md:text-xl font-semibold">ISAApp – Image Based Smart Attendance</h3> |
|
|
<p class="text-amber-300/90 text-sm mt-1">AAIMB 2023</p> |
|
|
<p class="opacity-80 text-sm mt-3">A camera-first pipeline for attendance with privacy-preserving data flows.</p> |
|
|
<div class="flex gap-3 mt-4 flex-wrap"> |
|
|
<a class="text-sm underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://link.springer.com" target="_blank" rel="noopener noreferrer">Springer</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 transition-colors"> |
|
|
<div class="aspect-[16/9] overflow-hidden"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/managingcongregations.png" alt="Managing Congregations" class="w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-300"> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg md:text-xl font-semibold">Managing Congregations by Predicting Infection Likelihood (COVID)</h3> |
|
|
<p class="text-amber-300/90 text-sm mt-1">IEEE CCEM 2020</p> |
|
|
<p class="opacity-80 text-sm mt-3">Graph-based proximity modeling to estimate contagion transfer risk in gatherings.</p> |
|
|
<div class="flex gap-3 mt-4 flex-wrap"> |
|
|
<a class="text-sm underline underline-offset-4 hover:opacity-80 transition-opacity" href="https://ieeexplore.ieee.org" target="_blank" rel="noopener noreferrer">IEEE Xplore</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="relative max-w-6xl mx-auto px-6 md:px-10 py-20 md:py-28"> |
|
|
<h2 class="text-3xl md:text-5xl font-semibold tracking-tight mb-8 gradient-text bg-gradient-to-r from-yellow-200 to-amber-400">Selected Projects</h2> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<a href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="block group rounded-2xl border border-white/10 bg-white/5 p-5 hover:bg-white/[0.08] transition-colors"> |
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
<h3 class="text-lg font-semibold">AI Wordle Solver</h3> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10">Vision + heuristic search</span> |
|
|
</div> |
|
|
<p class="opacity-80 text-sm mt-2">Predict the next best word by parsing a screenshot of a partially-filled Wordle.</p> |
|
|
<div class="mt-3 text-sm underline underline-offset-4 opacity-80 group-hover:opacity-100 transition-opacity">View →</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="block group rounded-2xl border border-white/10 bg-white/5 p-5 hover:bg-white/[0.08] transition-colors"> |
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
<h3 class="text-lg font-semibold">Search Browser History GPT</h3> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10">RAG on local history</span> |
|
|
</div> |
|
|
<p class="opacity-80 text-sm mt-2">Query your search history content semantically to jump to the right page.</p> |
|
|
<div class="mt-3 text-sm underline underline-offset-4 opacity-80 group-hover:opacity-100 transition-opacity">View →</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="block group rounded-2xl border border-white/10 bg-white/5 p-5 hover:bg-white/[0.08] transition-colors"> |
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
<h3 class="text-lg font-semibold">Splitwise GPT Vision</h3> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10">Doc parsing</span> |
|
|
</div> |
|
|
<p class="opacity-80 text-sm mt-2">Parse a bill image and auto-create Splitwise entries end-to-end.</p> |
|
|
<div class="mt-3 text-sm underline underline-offset-4 opacity-80 group-hover:opacity-100 transition-opacity">View →</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="block group rounded-2xl border border-white/10 bg-white/5 p-5 hover:bg-white/[0.08] transition-colors"> |
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
<h3 class="text-lg font-semibold">Genetic Handwritten Digits</h3> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10">NAS with GA</span> |
|
|
</div> |
|
|
<p class="opacity-80 text-sm mt-2">Evolve CNN kernels and pooling to optimize MNIST classification.</p> |
|
|
<div class="mt-3 text-sm underline underline-offset-4 opacity-80 group-hover:opacity-100 transition-opacity">View →</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="block group rounded-2xl border border-white/10 bg-white/5 p-5 hover:bg-white/[0.08] transition-colors"> |
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
<h3 class="text-lg font-semibold">Face Recognition LFW</h3> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10">SVM on FaceNet</span> |
|
|
</div> |
|
|
<p class="opacity-80 text-sm mt-2">One-vs-all and one-vs-one SVMs using FaceNet embeddings on LFW.</p> |
|
|
<div class="mt-3 text-sm underline underline-offset-4 opacity-80 group-hover:opacity-100 transition-opacity">View →</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="block group rounded-2xl border border-white/10 bg-white/5 p-5 hover:bg-white/[0.08] transition-colors"> |
|
|
<div class="flex items-start justify-between gap-4"> |
|
|
<h3 class="text-lg font-semibold">CLIP / SimCLR / MusicLM</h3> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10">Paper repos</span> |
|
|
</div> |
|
|
<p class="opacity-80 text-sm mt-2">Clean PyTorch/TensorFlow implementations for core vision & audio papers.</p> |
|
|
<div class="mt-3 text-sm underline underline-offset-4 opacity-80 group-hover:opacity-100 transition-opacity">View →</div> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="orgs" class="relative max-w-6xl mx-auto px-6 md:px-10 py-20 md:py-28"> |
|
|
<h2 class="text-3xl md:text-5xl font-semibold tracking-tight mb-8 gradient-text bg-gradient-to-r from-yellow-200 to-amber-400">Organizations & Leadership</h2> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
|
|
<a href="#" target="_blank" rel="noopener noreferrer" class="flex gap-4 p-5 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/[0.08] transition-colors"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/ol.jpeg" alt="Odyssey Lab" class="w-14 h-14 rounded-xl object-cover ring-1 ring-white/10"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Odyssey Lab</h3> |
|
|
<p class="text-amber-300/90 text-sm">Co-Founder</p> |
|
|
<p class="opacity-80 text-sm mt-2">Research collective with 15 students & mentors across IISc, IIT, IBM, and IIIT-Hyderabad.</p> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://nexttechlab.in" target="_blank" rel="noopener noreferrer" class="flex gap-4 p-5 rounded-2xl border border-white/10 bg-white/5 hover:bg-white/[0.08] transition-colors"> |
|
|
<img src="https://pranavgupta2603.github.io/new_images/ntl.webp" alt="Next Tech Lab" class="w-14 h-14 rounded-xl object-cover ring-1 ring-white/10"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold">Next Tech Lab</h3> |
|
|
<p class="text-amber-300/90 text-sm">Syndicate – Head AI Researcher</p> |
|
|
<p class="opacity-80 text-sm mt-2">Led >40 ML projects; organized 20+ workshops for 50+ students.</p> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="relative max-w-6xl mx-auto px-6 md:px-10 py-20 md:py-28"> |
|
|
<h2 class="text-3xl md:text-5xl font-semibold tracking-tight mb-8 gradient-text bg-gradient-to-r from-yellow-200 to-amber-400">Contact</h2> |
|
|
<div class="grid md:grid-cols-[1.2fr,1fr] gap-6 items-center"> |
|
|
<div class="space-y-4"> |
|
|
<p class="opacity-90">Open to research collaborations in multimodal reasoning, video understanding, and VLMs. Always happy to chat.</p> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<a href="mailto:pranavgupta2603@gmail.com" class="px-4 py-2 rounded-full bg-amber-400 text-black hover:bg-amber-300 font-medium transition-colors">Email me</a> |
|
|
<a href="https://x.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 transition-colors">X/Twitter</a> |
|
|
<a href="https://github.com/pranavgupta2603" target="_blank" rel="noopener noreferrer" class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 transition-colors">GitHub</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-white/10 rounded-2xl p-6 bg-white/5"> |
|
|
<p class="text-sm opacity-70">gpranav at umich dot edu</p> |
|
|
<p class="text-sm opacity-70">New Delhi, India → Ann Arbor, MI</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="text-center py-12 opacity-60 text-sm"> |
|
|
© <span id="year"></span> Pranav Gupta |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('year').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
const canvas = document.getElementById('starfield'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
let w = canvas.width = canvas.offsetWidth; |
|
|
let h = canvas.height = canvas.offsetHeight; |
|
|
const count = 600; |
|
|
let stars = []; |
|
|
|
|
|
|
|
|
function makeStars() { |
|
|
stars = []; |
|
|
for (let i = 0; i < count; i++) { |
|
|
stars.push({ |
|
|
x: Math.random() * w - w / 2, |
|
|
y: Math.random() * h - h / 2, |
|
|
z: Math.random() * w, |
|
|
s: Math.random() * 1.2 + 0.2 |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
makeStars(); |
|
|
|
|
|
|
|
|
function onResize() { |
|
|
w = canvas.width = canvas.offsetWidth; |
|
|
h = canvas.height = canvas.offsetHeight; |
|
|
makeStars(); |
|
|
} |
|
|
|
|
|
window.addEventListener('resize', onResize); |
|
|
|
|
|
|
|
|
function draw() { |
|
|
ctx.clearRect(0, 0, w, h); |
|
|
ctx.fillStyle = "#ffffff"; |
|
|
for (const star of stars) { |
|
|
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; |
|
|
requestAnimationFrame(draw); |
|
|
} |
|
|
|
|
|
requestAnimationFrame(draw); |
|
|
|
|
|
|
|
|
const knot = document.getElementById('spinning-knot'); |
|
|
let angle = 0; |
|
|
let lastTime = 0; |
|
|
const knotSpeed = 0.0025; |
|
|
|
|
|
function spinKnot(timestamp) { |
|
|
if (!lastTime) lastTime = timestamp; |
|
|
const deltaTime = timestamp - lastTime; |
|
|
lastTime = timestamp; |
|
|
|
|
|
angle += knotSpeed * deltaTime; |
|
|
knot.style.transform = `translate(-50%, -50%) rotate(${angle}rad)`; |
|
|
requestAnimationFrame(spinKnot); |
|
|
} |
|
|
|
|
|
requestAnimationFrame(spinKnot); |
|
|
|
|
|
|
|
|
const parallaxContent = document.getElementById('parallax-content'); |
|
|
|
|
|
function updateParallax() { |
|
|
const y = Math.max(-120, -window.scrollY * 0.15); |
|
|
const scale = 1 + Math.min(0.06, (window.scrollY / 800) * 0.06); |
|
|
parallaxContent.style.transform = `translateY(${y}px) scale(${scale})`; |
|
|
requestAnimationFrame(updateParallax); |
|
|
} |
|
|
|
|
|
window.addEventListener('scroll', updateParallax, { passive: true }); |
|
|
updateParallax(); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pranked03/gpranav" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
