script.js

const detectScreenSize = () => {
  const width = window.innerWidth
  let screenType = "mobile"

  if (width > 1920) screenType = "tv"
  else if (width > 1440) screenType = "large-desktop"
  else if (width > 1024) screenType = "desktop"
  else if (width > 768) screenType = "tablet"
  else if (width > 480) screenType = "small-tablet"
  else screenType = "mobile"

  document.documentElement.setAttribute("data-screen", screenType)
}

// Call on load and resize
detectScreenSize()
window.addEventListener("resize", detectScreenSize)

// Smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener("click", function (e) {
    e.preventDefault()
    const target = document.querySelector(this.getAttribute("href"))
    if (target) {
      target.scrollIntoView({ behavior: "smooth" })
    }
  })
})

// Discord button interaction
document.querySelector(".discord-btn").addEventListener("click", function (e) {
  e.preventDefault()
  const discordHandle = this.getAttribute("data-discord")
  alert(`Discord: ${discordHandle}\n\nCopy this handle to add me on Discord!`)
})

// Button hover animation enhancement
const buttons = document.querySelectorAll(".social-btn, .skill-card, .exp-item, .project-card, .book-card")

buttons.forEach((button) => {
  button.addEventListener("mouseenter", function () {
    this.style.transition = "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)"
  })
})

// Intersection Observer for scroll animations
const observerOptions = {
  threshold: 0.1,
  rootMargin: "0px 0px -50px 0px",
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.style.opacity = "1"
      entry.target.style.transform = "translateY(0)"
    }
  })
}, observerOptions)

document.querySelectorAll("section").forEach((section) => {
  section.style.opacity = "0"
  section.style.transform = "translateY(20px)"
  section.style.transition = "opacity 0.6s ease, transform 0.6s ease"
  observer.observe(section)
})

// Profile picture animation on load
window.addEventListener("load", () => {
  const profilePic = document.querySelector(".profile-pic")
  if (profilePic) {
    profilePic.style.animation = "fadeIn 0.8s ease-out"
  }
})