TD_Portfolio/script.js

"use strict";

const $HTML = document.documentElement;

if (sessionStorage.getItem("theme")) {
  $HTML.dataset.theme = sessionStorage.getItem("theme");
} else {
  $HTML.dataset.theme = "dark"; // Set the default theme to dark
}

const changeTheme = () => {
  $HTML.dataset.theme = sessionStorage.getItem("theme") === "dark";
  sessionStorage.setItem("theme", $HTML.dataset.theme);
};

const $tabBtn = document.querySelectorAll("[data-tab-btn]");
let [lastActiveTab] = document.querySelectorAll("[data-tab-content]");
let [lastActiveTabBtn] = $tabBtn;

$tabBtn.forEach(item => {
  item.addEventListener("click", function () {
    lastActiveTab.classList.remove("active");
    lastActiveTabBtn.classList.remove("active");

    const $tabContent = document.querySelector(`[data-tab-content="${item.dataset.tabBtn}"]`);
    $tabContent.classList.add("active");
    this.classList.add("active");

    lastActiveTab = $tabContent;
    lastActiveTabBtn = this;
  });
});

const cursor = document.getElementById('cursor');
cursor.style.position = 'fixed'; // Add 'position: fixed' to ensure absolute positioning

let cursorX = 0,
  cursorY = 0;

const isTouchDevice = () => {
  try {
    document.createEvent('TouchEvent');
    return true;
  } catch (e) {
    return false;
  }
};

const move = (e) => {
  if (!isTouchDevice()) {
    cursorX = e.clientX;
    cursorY = e.clientY;
    cursor.style.left = `${cursorX}px`;
    cursor.style.top = `${cursorY}px`;
  } else {
    // Disable custom cursor on touch devices
    cursor.style.display = "none";
    return;
  }
  
  cursor.style.zIndex = "9999";
  cursor.style.display = "block";
};

document.addEventListener('mouseenter', (e) => {
  cursor.style.zIndex = "9999";
  move(e);
});

document.addEventListener('mouseleave', () => {
  if (isTouchDevice()) {
    cursor.style.display = "none";
  }
});

document.addEventListener('mousemove', (e) => {
  move(e);
});

document.addEventListener('touchmove', (e) => {
  move(e);
  cursor.style.display = "none";
});

document.addEventListener('touchend', () => {
  cursor.style.display = "none";
});

document.addEventListener('touchstart', (e) => {
  cursor.style.display = "none"; // Hide the cursor on touchstart
  const scrollX = e.touches[0].pageX;
  const scrollY = e.touches[0].pageY;
  move({ clientX: scrollX, clientY: scrollY });
});

// animate border
const borderAnimation = () => {
  requestAnimationFrame(borderAnimation);
};

requestAnimationFrame(borderAnimation);

// handle scroll event
document.addEventListener('scroll', (e) => {
  const scrollX = e.pageX;
  const scrollY = e.pageY;
  move({ clientX: scrollX, clientY: scrollY });
});

function sendEmail() {
  emailjs.send('service_j9prncb', 'template_drg2vil', {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    subject: document.getElementById('subject').value,
    message: document.getElementById('message').value
  })
  .then(function(response) {
    console.log('SUCCESS!', response.status, response.text);
  }, function(error) {
    console.log('FAILED...', error);
  });
}