HTMLify

const body=document.body, panel=document.getElementById("panel"), themeBtn=document.getElementById("themeBtn"), close=document.getElementById("close"), label=document.getElementById("themeLabel"), menu=document.getElementById("menuBtn"), nav=document.getElementById("nav");
const names={midnight:"Midnight",paper:"Paper",aurora:"Aurora",sunset:"Sunset"};
function setTheme(t){if(t==="midnight")body.removeAttribute("data-theme");else body.dataset.theme=t;label.textContent=names[t];document.querySelectorAll(".theme").forEach(x=>x.classList.toggle("active",x.dataset.theme===t));localStorage.setItem("portfolio-theme",t)}
setTheme(localStorage.getItem("portfolio-theme")||"midnight");
themeBtn.onclick=()=>panel.classList.add("open");close.onclick=()=>panel.classList.remove("open");
panel.onclick=e=>{if(e.target===panel)panel.classList.remove("open")};
document.querySelectorAll(".theme").forEach(x=>x.onclick=()=>{setTheme(x.dataset.theme);panel.classList.remove("open")});
menu.onclick=()=>nav.classList.toggle("mobile");
nav.querySelectorAll("a").forEach(a=>a.onclick=()=>nav.classList.remove("mobile"));
const observer=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add("visible")}),{threshold:.12});
document.querySelectorAll(".reveal").forEach(e=>observer.observe(e));