my personal site
Create script.js
+67
+67
script.js
+67
script.js
···
1
+
(function() {
2
+
// Theme toggle
3
+
const themeToggleBtn = document.getElementById('theme-toggle');
4
+
if (themeToggleBtn) {
5
+
// Initial button label
6
+
if (document.documentElement.classList.contains('dark-theme')) {
7
+
themeToggleBtn.textContent = 'Light Mode';
8
+
} else {
9
+
themeToggleBtn.textContent = 'Dark Mode';
10
+
}
11
+
// Toggle handler
12
+
themeToggleBtn.addEventListener('click', () => {
13
+
const html = document.documentElement;
14
+
const isDark = html.classList.toggle('dark-theme');
15
+
themeToggleBtn.textContent = isDark ? 'Light Mode' : 'Dark Mode';
16
+
localStorage.setItem('theme', isDark ? 'dark' : 'light');
17
+
});
18
+
}
19
+
20
+
// Contact form placeholder handler
21
+
const contactForm = document.getElementById('contact-form');
22
+
if (contactForm) {
23
+
contactForm.addEventListener('submit', e => {
24
+
e.preventDefault();
25
+
alert('Thank you for your message! (This is a static placeholder form.)');
26
+
contactForm.reset();
27
+
});
28
+
}
29
+
30
+
// View Transition Navigation
31
+
const navLinks = Array.from(document.querySelectorAll('nav .menu a'));
32
+
// Tag each link with its index
33
+
navLinks.forEach((link, idx) => link.dataset.idx = idx);
34
+
35
+
navLinks.forEach(link => {
36
+
link.addEventListener('click', e => {
37
+
const target = link.getAttribute('href');
38
+
const current = document.querySelector('nav .menu a.active');
39
+
const fromIdx = Number(current?.dataset.idx ?? 0);
40
+
const toIdx = Number(link.dataset.idx);
41
+
42
+
// Determine slide direction
43
+
const forward = toIdx > fromIdx;
44
+
document.documentElement.style.setProperty(
45
+
'--vt-old-animation',
46
+
forward
47
+
? '0.4s ease-in both slide-out-left'
48
+
: '0.4s ease-in both slide-out-right'
49
+
);
50
+
document.documentElement.style.setProperty(
51
+
'--vt-new-animation',
52
+
forward
53
+
? '0.4s ease-out both slide-in-right'
54
+
: '0.4s ease-out both slide-in-left'
55
+
);
56
+
57
+
// Trigger view transition if supported
58
+
if (document.startViewTransition) {
59
+
e.preventDefault();
60
+
document.startViewTransition(() => {
61
+
window.location.href = target;
62
+
});
63
+
}
64
+
// Otherwise, normal navigation
65
+
});
66
+
});
67
+
})();