/* ═══════ THEME ═══════ */
const THEME = {
bg: '#FAF8F5', bgOuter: '#F0EDE8', text: '#1F1D1A', muted: '#5F564D',
accent: '#3D6091', accentMid: '#5A7FAF', accentWash: '#E8EDF4',
border: '#D8D2CA', placeholder: '#EBE8E3',
serif: "'Cormorant Garamond', serif",
sans: "'DM Sans', sans-serif",
kr: "'Noto Sans KR', sans-serif",
};
/* ═══════ PAW CURSOR ═══════ */
function PawCursor() {
const pawSvg = ``;
const dataUri = `data:image/svg+xml,${encodeURIComponent(pawSvg)}`;
const paws = React.useRef([]);
const idx = React.useRef(0);
const lastPos = React.useRef({ x: 0, y: 0 });
React.useEffect(() => {
// Create pool of paw elements
const pool = [];
for (let i = 0; i < 8; i++) {
const el = document.createElement('img');
el.src = dataUri;
el.className = 'paw-trail';
document.body.appendChild(el);
pool.push(el);
}
paws.current = pool;
const onMove = (e) => {
const dx = e.clientX - lastPos.current.x;
const dy = e.clientY - lastPos.current.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 60) return;
lastPos.current = { x: e.clientX, y: e.clientY };
const el = pool[idx.current % pool.length];
const angle = Math.atan2(dy, dx) * (180 / Math.PI) - 90;
const flip = idx.current % 2 === 0 ? 1 : -1;
el.style.left = `${e.clientX - 11}px`;
el.style.top = `${e.clientY - 11}px`;
el.style.transform = `rotate(${angle}deg) scaleX(${flip})`;
el.classList.add('visible');
idx.current++;
setTimeout(() => {
el.classList.remove('visible');
el.classList.add('fading');
setTimeout(() => el.classList.remove('fading'), 1200);
}, 2000);
};
window.addEventListener('mousemove', onMove, { passive: true });
return () => {
window.removeEventListener('mousemove', onMove);
pool.forEach(el => el.remove());
};
}, []);
return null;
}
/* ═══════ NAV ═══════ */
function Nav({ active }) {
const links = [
{ label: 'About', href: 'index.html' },
{ label: 'Research', href: 'research.html' },
{ label: 'Projects', href: 'projects.html' },
{ label: 'News', href: 'news.html' },
{ label: 'Blog', href: 'blog.html' },
{ label: 'Cats', href: 'cats.html' },
];
return (
);
}
/* ═══════ FOOTER ═══════ */
function Footer() {
return (
);
}
/* ═══════ PAGE LAYOUT WRAPPER ═══════ */
function PageLayout({ active, children }) {
return (
);
}
/* ═══════ SECTION LABEL ═══════ */
function SectionLabel({ text }) {
return (
{text}
);
}
/* ═══════ SIDE HEADING (editorial 2-col style) ═══════ */
function SideHeading({ line1, line2 }) {
return (
);
}
/* ═══════ PAGE HERO ═══════ */
function PageHero({ title, subtitle }) {
return (
);
}
/* ═══════ DIVIDER ═══════ */
function Divider() {
return ;
}
/* ═══════ EXPORT TO WINDOW ═══════ */
Object.assign(window, {
THEME, PawCursor, Nav, Footer, PageLayout, SectionLabel,
SideHeading, PageHero, Divider,
});