/* Portfolio app — wiring, cursor lens, corner mode toggle, and mount. */
const { useEffect, useRef, useState } = React;
const ACCENTS = {
teal: { teal: '#5dd2c9', azure: '#7aa9ff' },
amber: { teal: '#f0b85e', azure: '#ff8a6b' },
violet: { teal: '#a892ff', azure: '#dd92ff' },
mono: { teal: '#7a8699', azure: '#a3adbf' },
};
const MOTION_SCALE = { off: 0.0001, calm: 1, lively: 2 };
function CursorLens({ enabled }) {
const ref = useRef(null);
const [shrunk, setShrunk] = useState(false);
const isTouch = !window.matchMedia('(hover: hover)').matches;
useEffect(() => {
if (!enabled || isTouch) return;
let x = window.innerWidth / 2, y = window.innerHeight / 2;
let tx = x, ty = y;
const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
const onOver = (e) => {
const isHover = !!e.target.closest('a, button, .work-card, .nav .cta, .contact-grid a, .tag, .stack-group, .mode-toggle');
setShrunk(isHover);
};
let raf;
const tick = () => {
x += (tx - x) * 0.18;
y += (ty - y) * 0.18;
if (ref.current) ref.current.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
raf = requestAnimationFrame(tick);
};
window.addEventListener('mousemove', onMove, { passive: true });
window.addEventListener('mouseover', onOver, { passive: true });
raf = requestAnimationFrame(tick);
return () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseover', onOver);
cancelAnimationFrame(raf);
};
}, [enabled, isTouch]);
if (!enabled || isTouch) return null;
return ;
}
/* Two-mode toggle, fixed bottom-right. Looks like a light/dark switch. */
function ModeToggle({ preset, onChange }) {
return (
);
}
function App() {
const defaults = window.__TWEAK_DEFAULTS__ || { preset:'glass', motion:'calm', cursor:true, accent:'amber' };
const [t, setTweak] = useTweaks(defaults);
// Only two modes are exposed in UI; clamp anything else to glass.
const preset = (t.preset === 'terminal') ? 'terminal' : 'glass';
// Apply preset + motion + accent to
useEffect(() => {
const root = document.documentElement;
root.setAttribute('data-preset', preset);
root.style.setProperty('--motion-scale', String(MOTION_SCALE[t.motion] || 1));
const a = ACCENTS[t.accent] || ACCENTS.amber;
root.style.setProperty('--teal', a.teal);
root.style.setProperty('--azure', a.azure);
}, [preset, t.motion, t.accent]);
return (
setTweak('preset', p)} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();