[WIP] Replace current content with animated single-page website

[Copilot]

• Replace index.html with new single-page animated website structure
• Replace css/style.css with dark cinematic theme styles and animations
• Replace js/script.js with all JS: typewriter, particles, cursor glow, scroll animations, music toggle, click-to-reveal
• Verify layout, responsiveness and visual polish
• Code review and security scan

Original prompt

Overview

Replace the current website content with a completely new artistic animated single-page scroll website called "The Many Versions of [Purva]". This is a cinematic, dark-themed tribute/appreciation page for a 19-21 year old biology student who is also a dancer and guitarist.

The repo currently has index.html, css/ folder, and js/ folder. Use this existing structure — pure HTML, CSS, and JavaScript only (no React, no build tools, no npm). Everything must work by simply opening index.html in a browser or serving it via GitHub Pages.

---

Design Style

• Theme: Dark artistic theme
• Primary Colors: #0f0f1a (deep background), #1a1a2e (section/card backgrounds), #6c63ff (primary accent — headings, glows, buttons), #00d4ff (secondary accent — highlights, hover states)
• Accent Effect: Soft glowing gradients with spotlight sections
• Fonts: Use Google Fonts — elegant serif for headings (e.g., Playfair Display), clean modern sans-serif for body (e.g., Inter or Poppins)
• Vibe: Modern portfolio + cinematic presentation
• Background Effects:
  • Subtle animated gradient background (CSS animated or JS canvas)
  • Floating light particles (JS canvas-based)
  • Soft scroll-triggered fade and slide animations (IntersectionObserver)

---

Layout

• Type: Single Page Scroll Website
• Scroll Effects: Smooth scrolling with section-based transitions (CSS scroll-behavior: smooth)
• Animation Style: Fade-in, slide-up, parallax effects, soft hover glow — all using IntersectionObserver + CSS transitions/animations

---

Sections (in order)

1. Hero Section

• Headline Sequence (typewriter or fade-swap cycling animation):
  1. "Not Just A Biology Student."
  2. "Dancer."
  3. "Guitarist."
  4. "Future Achiever."
  5. "Main Character."
• Subtext: "A creative observation of someone who effortlessly switches between worlds."
• CTA Button: "Explore the Versions" — smooth-scrolls to the next section
• Animation: Text transition with typewriter or fade swap effect. The headlines should cycle automatically.

2. Guitar Mode

• Title: "🎸 When She Picks Up a Guitar"
• Content: "Atmosphere shifts. Background noise fades. Even time seems to listen."
• Visual Effect: Animated sound wave or glowing string light effect (CSS/SVG animation)
• Animation: Fade-in from left with soft glow hover effects
• Image Placement: Include a subtle framed image placeholder area with soft shadow and glow, cinematic grayscale style with color accent overlay (use a placeholder img tag with data-src or a styled div — user can add their own photo later)

3. Dance Mode

• Title: "💃 When Music Wins"
• Content: "Some people hear music. Some people become music."
• Visual Effect: Flowing abstract motion background resembling fabric or rhythm (CSS animated gradients or SVG)
• Animation: Parallax scroll with smooth upward motion
• Image Placement: Same subtle framed image placeholder as Guitar section

4. Biology Mode

• Title: "🧬 Study Mode Activated"
• Content (sequential text reveal — each line appears one after another on scroll):
  1. "Focused."
  2. "Unbothered."
  3. "Goal-oriented."
  4. "Distractions detected. Ignored successfully."
• Visual Effect: Subtle DNA helix animation in background (CSS/SVG animated double helix)
• Animation: Sequential text reveal — each line fades in with a staggered delay when section enters viewport

5. Personality Mode

• Title: "✨ Premium Standards."
• Content (staggered fade-in):
  1. "Not easily impressed."
  2. "Not easily distracted."
  3. "Not easily available."
  4. "And that is rare."
• Animation: Staggered fade-in with spotlight highlight effect — a soft radial glow follows or highlights each line as it appears

6. Hidden Message Section

• Type: Click-to-reveal
• Button Text: "Why Does This Website Exist?"
• Hidden Content (revealed on click): "No expectations. No pressure. Just appreciation for someone who doesn't even try to be impressive — but is."
• Animation: Clicking the button blurs the background softly and reveals a centered fade-in card with the hidden message. A close/dismiss button should also be present.

---

Extra Features

Cursor Glow Effect

• A soft radial gradient glow (using #6c63ff or #00d4ff at low opacity) that follows the mouse cursor across the entire page
• Implemented via mousemove event listener updating a fixed-position div

Music Toggle (Optional)

• A small, elegant toggle button (e.g., a music note icon 🎵) fixed in the corner
• Toggles soft ambient background music on/off
• Music should be OFF by default
• Use an <audio> element — include a placeholder src attribute (user can add their own audio file later)
• Button should visually indicate on/off state

Floating Particles

• Lightweight canvas-based floating light particles across the page background
• Soft, sm...

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.