-
-
-
+
+
+
+
+
+
+
+
+ 15+
+ Projects Completed
+
+
+
+
+
+
+ 2+
+ Years Coding
-
+
+
+
+
+
+ 10+
+ Technologies
+
+
+
+
+
+
+
+
+ Web / DSA
+ Current Focus
+
+
+
+
+
+
@@ -215,5 +447,7 @@
Contact Me
+
+
\ No newline at end of file
diff --git a/revati-kadam-portfolio/js/hero.js b/revati-kadam-portfolio/js/hero.js
new file mode 100644
index 0000000..6f06731
--- /dev/null
+++ b/revati-kadam-portfolio/js/hero.js
@@ -0,0 +1,293 @@
+/* ═══════════════════════════════════════════
+ HERO V2 — Immersive Motion Engine (GSAP & Canvas)
+ Staggered Load, Orbital Physics, Magnetic Hooks, Canvas Repulsion
+ ═══════════════════════════════════════════ */
+
+const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+const isMobile = window.matchMedia('(max-width: 767px)').matches;
+
+// Decoupled trigger: initHeroV2() is now called by the preloader script on loading completion.
+
+
+function initHeroV2() {
+ if (prefersReduced) {
+ showAllInstant();
+ return;
+ }
+
+ // 1. Entrance Staggered Orchestration
+ const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
+
+ // Activate glows and meshes
+ tl.to('.hv2-radial--a', { opacity: 1, duration: 2.0 }, 0.0)
+ .to('.hv2-radial--b', { opacity: 1, duration: 2.0 }, 0.2)
+ .to('.hv2-radial--c', { opacity: 1, duration: 1.5 }, 0.4);
+
+ // Stagger Header Navigation items
+ tl.fromTo('.navbar .logo',
+ { y: -20, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 }, 0.2);
+
+ tl.fromTo('.desktop-nav .nav-link',
+ { y: -20, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.6, stagger: 0.08 }, 0.3);
+
+ tl.fromTo('.nav-actions',
+ { y: -20, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 }, 0.5);
+
+ // Left Content Text Elements
+ tl.fromTo('.hv2-eyebrow-wrap',
+ { y: 24, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 }, 0.4);
+
+ tl.fromTo('.hv2-heading',
+ { y: 35, opacity: 0 },
+ { y: 0, opacity: 1, duration: 1.0 }, 0.6);
+
+ tl.fromTo('.hv2-typing-wrap',
+ { y: 20, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 }, 0.95);
+
+ tl.fromTo('.hv2-desc',
+ { y: 20, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 }, 1.1);
+
+ tl.fromTo('#hv2CTA',
+ { y: 20, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 }, 1.25);
+
+ tl.fromTo('#hv2Social',
+ { y: 15, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 }, 1.35);
+
+ // Right Centerpiece Portrait Scene
+ tl.fromTo('#hv2Portrait',
+ { scale: 0.88, opacity: 0, rotationY: -15, y: 30 },
+ { scale: 1, opacity: 1, rotationY: 0, y: 0, duration: 1.5, ease: 'power4.out' },
+ 0.85);
+
+ tl.fromTo('#statusBadge',
+ { y: 20, opacity: 0, scale: 0.85 },
+ { y: 0, opacity: 1, scale: 1, duration: 0.8, ease: 'back.out(1.4)' },
+ 1.4);
+
+ // Bottom Stats Panel
+ tl.fromTo('#heroStatsPanel',
+ { y: 30, opacity: 0 },
+ { y: 0, opacity: 1, duration: 1.0, ease: 'power3.out' },
+ 1.4);
+
+ // Scroll Down Indicator
+ tl.fromTo('#scrollIndicator',
+ { y: 15, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8 },
+ 1.6);
+
+ // Loop & Ambient Handlers Initialization
+ tl.add(() => {
+ initOrbitRotation();
+ if (!isMobile) {
+ initParallax();
+ initMagneticInteractivity();
+ }
+ initCanvasMesh();
+ }, 1.8);
+}
+
+function showAllInstant() {
+ gsap.set([
+ '.hv2-radial', '.navbar .logo', '.desktop-nav .nav-link', '.nav-actions',
+ '.hv2-eyebrow-wrap', '.hv2-heading', '.hv2-typing-wrap', '.hv2-desc',
+ '#hv2CTA', '#hv2Social', '#hv2Portrait', '#statusBadge',
+ '#heroStatsPanel', '#scrollIndicator'
+ ], { opacity: 1, y: 0, scale: 1, rotationY: 0, skewX: 0 });
+}
+
+/* ── GSAP CONTINUOUS ORBIT ROTATION ── */
+function initOrbitRotation() {
+ gsap.to('#portraitOrbital', {
+ rotation: 360,
+ duration: 20,
+ repeat: -1,
+ ease: 'none'
+ });
+ gsap.to('#portraitOrbital2', {
+ rotation: -360,
+ duration: 30,
+ repeat: -1,
+ ease: 'none'
+ });
+}
+
+/* ── MULTI-DEPTH MOUSE PARALLAX ── */
+function initParallax() {
+ const scene = document.querySelector('.hero-v2');
+ const chassis = document.getElementById('portraitChassis');
+ const glow = document.getElementById('portraitGlow');
+ const img = document.getElementById('portraitImg');
+ const badge = document.getElementById('statusBadge');
+
+ if (!scene || !chassis) return;
+
+ let mx = 0, my = 0, raf = null;
+
+ function update() {
+ gsap.to(chassis, {
+ rotationY: mx * 12, rotationX: -my * 10,
+ x: mx * 12, y: my * 12,
+ duration: 1.2, ease: 'power2.out', overwrite: 'auto'
+ });
+ gsap.to(img, {
+ x: -mx * 10, y: -my * 8,
+ duration: 1.4, ease: 'power2.out', overwrite: 'auto'
+ });
+ gsap.to(glow, {
+ x: mx * 30, y: my * 24,
+ duration: 1.8, ease: 'power2.out', overwrite: 'auto'
+ });
+ gsap.to(badge, {
+ x: mx * 20, y: my * 15,
+ duration: 1.0, ease: 'power2.out', overwrite: 'auto'
+ });
+ raf = null;
+ }
+
+ scene.addEventListener('mousemove', e => {
+ const r = scene.getBoundingClientRect();
+ mx = ((e.clientX - r.left) / r.width - 0.5) * 2;
+ my = ((e.clientY - r.top) / r.height - 0.5) * 2;
+ if (!raf) raf = requestAnimationFrame(update);
+ });
+
+ scene.addEventListener('mouseleave', () => {
+ mx = 0; my = 0;
+ gsap.to([chassis, img, glow, badge], {
+ x: 0, y: 0, rotationX: 0, rotationY: 0,
+ duration: 1.6, ease: 'elastic.out(1, 0.35)', overwrite: 'auto'
+ });
+ });
+}
+
+/* ── MAGNETIC HOOKS INTERACTIVITY ── */
+function initMagneticInteractivity() {
+ const magneticElements = document.querySelectorAll('.magnetic-btn, .hv2-circular-frame, .hv2-status-card');
+
+ magneticElements.forEach(elem => {
+ elem.addEventListener('mousemove', e => {
+ const r = elem.getBoundingClientRect();
+ const pullStrength = elem.classList.contains('hv2-circular-frame') ? 0.08 : 0.22;
+ const dx = (e.clientX - r.left - r.width / 2) * pullStrength;
+ const dy = (e.clientY - r.top - r.height / 2) * pullStrength;
+
+ gsap.to(elem, {
+ x: dx,
+ y: dy,
+ duration: 0.4,
+ ease: 'power2.out',
+ overwrite: 'auto'
+ });
+ });
+
+ elem.addEventListener('mouseleave', () => {
+ gsap.to(elem, {
+ x: 0,
+ y: 0,
+ duration: 0.9,
+ ease: 'elastic.out(1, 0.3)',
+ overwrite: 'auto'
+ });
+ });
+ });
+}
+
+/* ── KINETIC CANVAS PARTICLE MESH (Repulsion Physics) ── */
+function initCanvasMesh() {
+ const canvas = document.getElementById('heroCanvas');
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ let particles = [];
+ const spacing = 40;
+ let mouse = { x: -1000, y: -1000 };
+ let animationFrameId;
+
+ function resizeCanvas() {
+ canvas.width = canvas.parentElement.offsetWidth;
+ canvas.height = canvas.parentElement.offsetHeight;
+ generateGrid();
+ }
+
+ function generateGrid() {
+ particles = [];
+ const cols = Math.floor(canvas.width / spacing) + 2;
+ const rows = Math.floor(canvas.height / spacing) + 2;
+
+ // We only generate grid points for the bottom half to create a floor grid wave
+ const startRow = Math.floor(rows * 0.55);
+
+ for (let r = startRow; r < rows; r++) {
+ for (let c = 0; c < cols; c++) {
+ particles.push({
+ baseX: c * spacing,
+ baseY: r * spacing,
+ x: c * spacing,
+ y: r * spacing,
+ vx: 0,
+ vy: 0
+ });
+ }
+ }
+ }
+
+ window.addEventListener('resize', resizeCanvas);
+ resizeCanvas();
+
+ const scene = document.querySelector('.hero-v2');
+ scene.addEventListener('mousemove', e => {
+ const r = canvas.getBoundingClientRect();
+ mouse.x = e.clientX - r.left;
+ mouse.y = e.clientY - r.top;
+ });
+
+ scene.addEventListener('mouseleave', () => {
+ mouse.x = -1000;
+ mouse.y = -1000;
+ });
+
+ function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = 'rgba(99, 102, 241, 0.25)';
+
+ particles.forEach(p => {
+ const dx = mouse.x - p.x;
+ const dy = mouse.y - p.y;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+ const maxDist = 180;
+
+ if (dist < maxDist) {
+ const force = (maxDist - dist) / maxDist;
+ p.vx -= (dx / dist) * force * 1.2;
+ p.vy -= (dy / dist) * force * 1.2;
+ }
+
+ // Spring physics back to grid coordinate anchor
+ p.vx += (p.baseX - p.x) * 0.05;
+ p.vy += (p.baseY - p.y) * 0.05;
+
+ // Friction damping
+ p.vx *= 0.83;
+ p.vy *= 0.83;
+
+ p.x += p.vx;
+ p.y += p.vy;
+
+ ctx.beginPath();
+ ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2);
+ ctx.fill();
+ });
+
+ animationFrameId = requestAnimationFrame(animate);
+ }
+
+ animate();
+}
diff --git a/revati-kadam-portfolio/js/navigation.js b/revati-kadam-portfolio/js/navigation.js
index 28e9c4d..20e16bd 100644
--- a/revati-kadam-portfolio/js/navigation.js
+++ b/revati-kadam-portfolio/js/navigation.js
@@ -1,73 +1,256 @@
-// ── Show/hide sections (existing logic kept) ──────────────────────────────
-function showSection(id) {
- document.getElementById(id).scrollIntoView({
- behavior: "smooth"
- });
+// ── DOM Elements
+const navbar = document.getElementById("navbar");
+const navIndicator = document.getElementById("navIndicator");
+const desktopNavLinks = document.querySelectorAll(".desktop-nav .nav-link");
+const sidebarLinks = document.querySelectorAll(".sidebar-link");
+const allNavLinks = [...desktopNavLinks, ...sidebarLinks];
+const hamburger = document.getElementById("hamburger");
+const closeSidebarBtn = document.getElementById("closeSidebar");
+const sidebarDrawer = document.getElementById("sidebarDrawer");
+const navOverlay = document.getElementById("navOverlay");
+const sections = document.querySelectorAll(".section");
+let isMenuOpen = false;
- updateActiveNav(id);
-}
+// ── Accessibility Closures
+document.addEventListener("keydown", (e) => {
+ if (e.key === "Escape" && isMenuOpen) {
+ closeMenu();
+ hamburger.focus();
+ }
+});
-// ── Active nav link highlight ──────────────────────────────────────────────
-function updateActiveNav(activeId) {
- document.querySelectorAll(".nav-links li").forEach(li => {
- li.classList.remove("nav-active");
+if (navOverlay) {
+ navOverlay.addEventListener("click", () => {
+ if (isMenuOpen) closeMenu();
});
+}
- // match the li whose onclick calls showSection('activeId')
- document.querySelectorAll(".nav-links li").forEach(li => {
- const onclick = li.getAttribute("onclick") || "";
- if (onclick.includes(`'${activeId}'`)) {
- li.classList.add("nav-active");
+// ── Navbar Scroll Behavior
+function handleScroll() {
+ const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+ if (scrollTop > 50) {
+ navbar.classList.add("scrolled");
+ } else {
+ navbar.classList.remove("scrolled");
+ }
+
+ let currentSection = "";
+ sections.forEach(sec => {
+ const sectionTop = sec.offsetTop;
+ if (scrollTop >= sectionTop - 250) {
+ currentSection = sec.getAttribute("id");
}
});
-}
-// ── Scroll progress bar ────────────────────────────────────────────────────
-function initScrollProgress() {
- const bar = document.getElementById("scroll-progress");
- if (!bar) return;
+ if (currentSection) {
+ updateActiveIndicator(currentSection);
+ }
+}
- const main = document.querySelector(".main");
- if (!main) return;
+window.addEventListener("scroll", handleScroll);
- main.addEventListener("scroll", () => {
- const scrollTop = main.scrollTop;
- const scrollMax = main.scrollHeight - main.clientHeight;
- const pct = scrollMax > 0 ? (scrollTop / scrollMax) * 100 : 0;
- bar.style.width = pct + "%";
+// ── Update Active Indicator
+function updateActiveIndicator(activeId) {
+ allNavLinks.forEach(link => {
+ if (link.dataset.section === activeId) {
+ link.classList.add("active");
+
+ // If desktop/tablet, animate the sliding pill
+ if (window.innerWidth >= 768 && link.classList.contains("nav-link")) {
+ const linkRect = link.getBoundingClientRect();
+ const navRect = document.getElementById("desktopNavLinks").getBoundingClientRect();
+ const dotWidth = 6;
+ const centerX = (linkRect.left - navRect.left) + (linkRect.width / 2) - (dotWidth / 2);
+
+ gsap.to(navIndicator, {
+ x: centerX,
+ width: dotWidth,
+ opacity: 1,
+ duration: 0.4,
+ ease: "power3.out",
+ overwrite: "auto"
+ });
+ }
+ } else {
+ link.classList.remove("active");
+ }
});
}
-// ── Section entrance animations via IntersectionObserver ──────────────────
-function initSectionAnimations() {
- // respect reduced-motion preference
+// ── GSAP Navbar Entrance Animation
+function animateNavbarEntrance() {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+ gsap.fromTo(navbar,
+ { y: -100, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.8, ease: "power3.out" }
+ );
- const observer = new IntersectionObserver(
- (entries) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- entry.target.classList.add("section-visible");
- observer.unobserve(entry.target); // animate only once
- }
+ if (window.innerWidth >= 768) {
+ gsap.fromTo(desktopNavLinks,
+ { y: -15, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "power3.out", delay: 0.3 }
+ );
+ }
+}
+
+// ── Smooth Sliding Pill Hover Effect
+desktopNavLinks.forEach(link => {
+ link.addEventListener("mouseenter", () => {
+ if (window.innerWidth >= 768) {
+ const linkRect = link.getBoundingClientRect();
+ const navRect = document.getElementById("desktopNavLinks").getBoundingClientRect();
+ const dotWidth = 6;
+ const centerX = (linkRect.left - navRect.left) + (linkRect.width / 2) - (dotWidth / 2);
+
+ gsap.to(navIndicator, {
+ x: centerX,
+ width: dotWidth,
+ opacity: 1,
+ duration: 0.3,
+ ease: "power2.out",
+ overwrite: "auto"
});
- },
- { threshold: 0.15 }
+ }
+ });
+
+ link.addEventListener("click", (e) => {
+ e.preventDefault();
+ document.getElementById(link.dataset.section).scrollIntoView({ behavior: "smooth" });
+ });
+});
+
+const desktopNavContainer = document.getElementById("desktopNavLinks");
+if (desktopNavContainer) {
+ desktopNavContainer.addEventListener("mouseleave", () => {
+ if (window.innerWidth >= 768) {
+ const activeLink = document.querySelector(".desktop-nav .nav-link.active");
+ if (activeLink) {
+ const linkRect = activeLink.getBoundingClientRect();
+ const navRect = desktopNavContainer.getBoundingClientRect();
+ const dotWidth = 6;
+ const centerX = (linkRect.left - navRect.left) + (linkRect.width / 2) - (dotWidth / 2);
+
+ gsap.to(navIndicator, {
+ x: centerX,
+ width: dotWidth,
+ opacity: 1,
+ duration: 0.4,
+ ease: "power3.out",
+ overwrite: "auto"
+ });
+ } else {
+ gsap.to(navIndicator, { opacity: 0, duration: 0.3 });
+ }
+ }
+ });
+}
+
+const logoLink = document.querySelector(".logo");
+if (logoLink) {
+ logoLink.addEventListener("click", () => {
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ });
+}
+
+// ── Sidebar Clicks
+sidebarLinks.forEach(link => {
+ link.addEventListener("click", (e) => {
+ e.preventDefault();
+ closeMenu();
+ document.getElementById(link.dataset.section).scrollIntoView({ behavior: "smooth" });
+ });
+});
+
+// ── Mobile Sidebar Drawer GSAP Logic
+function openMenu() {
+ isMenuOpen = true;
+ document.body.style.overflow = "hidden"; // Prevent scroll
+
+ hamburger.classList.add("is-active");
+ hamburger.setAttribute("aria-expanded", "true");
+ sidebarDrawer.setAttribute("aria-hidden", "false");
+
+ gsap.to(navOverlay, { autoAlpha: 1, duration: 0.4, ease: "power2.inOut" });
+ gsap.to(sidebarDrawer, { x: "0%", duration: 0.6, ease: "power3.out" });
+
+ gsap.fromTo(sidebarLinks,
+ { y: 20, opacity: 0 },
+ { y: 0, opacity: 1, duration: 0.4, stagger: 0.08, ease: "power2.out", delay: 0.2 }
);
+}
- document.querySelectorAll(".section").forEach(sec => observer.observe(sec));
+function closeMenu() {
+ isMenuOpen = false;
+ document.body.style.overflow = ""; // Restore scroll
+
+ hamburger.classList.remove("is-active");
+ hamburger.setAttribute("aria-expanded", "false");
+ sidebarDrawer.setAttribute("aria-hidden", "true");
+
+ gsap.to(sidebarLinks, {
+ y: 20, opacity: 0, duration: 0.2, stagger: { each: 0.03, from: "end" }, ease: "power2.in"
+ });
+
+ gsap.to(sidebarDrawer, { x: "100%", duration: 0.5, ease: "power3.inOut", delay: 0.1 });
+ gsap.to(navOverlay, { autoAlpha: 0, duration: 0.4, ease: "power2.inOut", delay: 0.2 });
}
-// ── Toggle hamburger menu ──────────────────────────────────────────────────
-function toggleNavbar() {
- const nav = document.getElementById("navLinks");
- nav.classList.toggle("show");
+if (hamburger) {
+ hamburger.addEventListener("click", () => {
+ if (isMenuOpen) closeMenu();
+ else openMenu();
+ });
+}
+
+if (closeSidebarBtn) {
+ closeSidebarBtn.addEventListener("click", closeMenu);
+}
+
+// ── Handle Resize
+window.addEventListener("resize", () => {
+ if (window.innerWidth >= 768 && isMenuOpen) {
+ closeMenu();
+ }
+ if (window.innerWidth >= 768) {
+ const activeLink = document.querySelector(".desktop-nav .nav-link.active");
+ if (activeLink) updateActiveIndicator(activeLink.dataset.section);
+ }
+});
+
+// ── Scroll Progress & Observer Initialization
+function initScrollProgress() {
+ const bar = document.getElementById("scroll-progress");
+ if (!bar) return;
+
+ window.addEventListener("scroll", () => {
+ const scrollTop = window.scrollY || document.documentElement.scrollTop;
+ const scrollMax = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+ const pct = scrollMax > 0 ? (scrollTop / scrollMax) * 100 : 0;
+ bar.style.width = pct + "%";
+ });
+}
+
+function initSectionAnimations() {
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add("section-visible");
+ observer.unobserve(entry.target);
+ }
+ });
+ }, { threshold: 0.15 });
+
+ sections.forEach(sec => observer.observe(sec));
}
-// ── Init on DOM ready ──────────────────────────────────────────────────────
+// ── Init on DOM ready
document.addEventListener("DOMContentLoaded", () => {
- // show home by default and highlight its nav link
- showSection("home");
+ gsap.set(sidebarDrawer, { x: "100%" }); // Initialize drawer position
+ animateNavbarEntrance();
+ handleScroll();
initScrollProgress();
initSectionAnimations();
});
\ No newline at end of file
diff --git a/revati-kadam-portfolio/js/preloader.js b/revati-kadam-portfolio/js/preloader.js
new file mode 100644
index 0000000..15da046
--- /dev/null
+++ b/revati-kadam-portfolio/js/preloader.js
@@ -0,0 +1,210 @@
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (prefersReducedMotion) {
+ const loader = document.getElementById("preloader");
+ if (loader) loader.style.display = "none";
+ document.body.classList.remove("loading");
+ if (typeof initHeroV2 === "function") {
+ initHeroV2();
+ }
+ return;
+ }
+
+ startPreloaderAnimation();
+});
+
+function startPreloaderAnimation() {
+ const circleEl = document.getElementById("preloaderCircle");
+
+ // Set up GSAP timeline
+ const tl = gsap.timeline();
+
+ // 1. Premium Logo Character Reveal (Staggered scale, translation, and rotational flip)
+ tl.fromTo('.preloader-logo span',
+ { y: 40, rotateX: -60, opacity: 0 },
+ { y: 0, rotateX: 0, opacity: 1, duration: 0.8, stagger: 0.04, ease: "back.out(1.5)" }
+ );
+
+ // Status messages and transition tracking variables
+ const statusMessages = [
+ { min: 0, max: 20, text: "CONNECTING TO PORTFOLIO NODE..." },
+ { min: 20, max: 45, text: "INITIALIZING DIGITAL GRIDS..." },
+ { min: 45, max: 70, text: "RESOLVING IMMERSIVE PHYSICS..." },
+ { min: 70, max: 90, text: "STABILIZING GRAPHICS MESH..." },
+ { min: 90, max: 100, text: "PREPARING INTERFACE..." }
+ ];
+
+ let lastHundreds = -1;
+ let lastTens = -1;
+ let lastOnes = -1;
+ let lastStatusText = "";
+
+ // Progress tracker object
+ const progressObj = { value: 0 };
+
+ // 2. Count progress from 0 to 100
+ tl.to(progressObj, {
+ value: 100,
+ duration: 2.2,
+ ease: "power2.out",
+ onUpdate: () => {
+ const roundedVal = Math.floor(progressObj.value);
+
+ // A. Update Circular Progress Stroke
+ if (circleEl) {
+ // stroke-dasharray is 282.7 (2 * PI * r)
+ const offset = 282.7 - (roundedVal / 100) * 282.7;
+ circleEl.style.strokeDashoffset = offset;
+ }
+
+ // B. Calculate digits for mechanical rolling ticker
+ const hundreds = Math.floor(roundedVal / 100);
+ const tens = Math.floor((roundedVal % 100) / 10);
+ const ones = roundedVal % 10;
+
+ // C. Animate Hundreds Digit Column (only visible at >= 100%)
+ if (hundreds !== lastHundreds) {
+ lastHundreds = hundreds;
+ const col = document.getElementById("tickerHundreds");
+ if (col) {
+ if (hundreds > 0) {
+ col.classList.add("visible");
+ }
+ gsap.to(col, { y: -hundreds * 36, duration: 0.4, ease: "back.out(1.2)" });
+ }
+ }
+
+ // D. Animate Tens Digit Column
+ if (tens !== lastTens) {
+ lastTens = tens;
+ const col = document.getElementById("tickerTens");
+ if (col) {
+ gsap.to(col, { y: -tens * 36, duration: 0.35, ease: "back.out(1.2)" });
+ }
+ }
+
+ // E. Animate Ones Digit Column
+ if (ones !== lastOnes) {
+ lastOnes = ones;
+ const col = document.getElementById("tickerOnes");
+ if (col) {
+ gsap.to(col, { y: -ones * 36, duration: 0.15, ease: "power1.out" });
+ }
+ }
+
+ // F. Smooth change transition for status messages
+ const activeMsg = statusMessages.find(m => roundedVal >= m.min && roundedVal <= m.max)?.text || "";
+ if (activeMsg !== lastStatusText) {
+ lastStatusText = activeMsg;
+ const statusEl = document.getElementById("preloaderStatus");
+ if (statusEl) {
+ gsap.to(statusEl, {
+ opacity: 0,
+ y: -5,
+ duration: 0.1,
+ onComplete: () => {
+ statusEl.innerText = activeMsg;
+ gsap.to(statusEl, { opacity: 0.8, y: 0, duration: 0.15 });
+ }
+ });
+ }
+ }
+ },
+ onComplete: dismissPreloader
+ }, "-=0.2");
+}
+
+function dismissPreloader() {
+ const exitTimeline = gsap.timeline({
+ onComplete: () => {
+ const loader = document.getElementById("preloader");
+ if (loader) loader.style.display = "none";
+ document.body.classList.remove("loading");
+ }
+ });
+
+ // 1. Stagger letters out upwards with tilt rotation
+ exitTimeline.to('.preloader-logo span', {
+ y: -40,
+ rotateX: 45,
+ opacity: 0,
+ duration: 0.45,
+ stagger: 0.02,
+ ease: "power2.in"
+ }, 0);
+
+ // 2. Fade out other loading dashboard components
+ exitTimeline.to(['.preloader-dashboard', '.preloader-radial'], {
+ opacity: 0,
+ scale: 0.9,
+ duration: 0.4,
+ ease: "power2.in"
+ }, 0);
+
+ // 3. Staggered, skewed diagonal curtain split reveals
+
+ // LAYER 1: Frontmost solid curtains
+ exitTimeline.to('.preloader-curtain--left.preloader-curtain--layer1', {
+ xPercent: -105,
+ skewX: -10,
+ duration: 1.1,
+ ease: "power3.inOut"
+ }, 0.2);
+
+ exitTimeline.to('.preloader-curtain--right.preloader-curtain--layer1', {
+ xPercent: 105,
+ skewX: 10,
+ duration: 1.1,
+ ease: "power3.inOut"
+ }, "<");
+
+ // LAYER 2: Middle colored gradient curtains
+ exitTimeline.to('.preloader-curtain--left.preloader-curtain--layer2', {
+ xPercent: -105,
+ skewX: -7,
+ duration: 1.25,
+ ease: "power3.inOut"
+ }, 0.28);
+
+ exitTimeline.to('.preloader-curtain--right.preloader-curtain--layer2', {
+ xPercent: 105,
+ skewX: 7,
+ duration: 1.25,
+ ease: "power3.inOut"
+ }, "<");
+
+ // LAYER 3: Backmost glassmorphic blur curtains
+ exitTimeline.to('.preloader-curtain--left.preloader-curtain--layer3', {
+ xPercent: -105,
+ skewX: -4,
+ duration: 1.4,
+ ease: "power3.inOut"
+ }, 0.36);
+
+ exitTimeline.to('.preloader-curtain--right.preloader-curtain--layer3', {
+ xPercent: 105,
+ skewX: 4,
+ duration: 1.4,
+ ease: "power3.inOut"
+ }, "<");
+
+ // 4. Hero Cinematic Handoff
+ const heroEl = document.querySelector('.hero-v2');
+ if (heroEl) {
+ gsap.set(heroEl, { scale: 0.96, filter: "blur(8px)" });
+ exitTimeline.to(heroEl, {
+ scale: 1,
+ filter: "blur(0px)",
+ duration: 1.5,
+ ease: "power2.out"
+ }, 0.36); // Starts exactly when the glassmorphic layer begins to pull back
+ }
+
+ // Trigger standard hero element staggers mid-reveal
+ exitTimeline.call(() => {
+ if (typeof initHeroV2 === "function") {
+ initHeroV2();
+ }
+ }, null, 0.44);
+}
diff --git a/revati-kadam-portfolio/js/script.js b/revati-kadam-portfolio/js/script.js
index 660aad5..96a708a 100644
--- a/revati-kadam-portfolio/js/script.js
+++ b/revati-kadam-portfolio/js/script.js
@@ -2,13 +2,15 @@ function showSection(id) {
document.getElementById(id).scrollIntoView({ behavior: "smooth" });
}
-const roles = ["Web Developer", "Programmer", "Problem Solver", "Website Designer", "Tech Enthusiast"];
+const roles = ["digital products", "web applications", "modern websites", "interactive UIs", "clean code"];
let i = 0, j = 0, del = false;
function type() {
+ const el = document.getElementById("typing");
+ if (!el) return; // Hero V2 uses role drum instead
let text = roles[i];
j = del ? j - 1 : j + 1;
- document.getElementById("typing").innerText = text.substring(0, j);
+ el.innerText = text.substring(0, j);
if (!del && j === text.length) {
del = true;
return setTimeout(type, 1500);
@@ -21,6 +23,7 @@ function type() {
}
type();
+
(function() {
const saved = localStorage.getItem("theme");
if (saved === "light") document.body.classList.add("light-theme");
-
-
- 
-
-
- 
-
+
+
+