// ============================================================ // App Root Component // ============================================================ const App = () => { // Initialise dark mode from localStorage or system preference const [darkMode, setDarkMode] = React.useState(() => { const stored = localStorage.getItem('theme'); if (stored) return stored === 'dark'; return window.matchMedia('(prefers-color-scheme: dark)').matches; }); // Apply / remove 'dark' class on React.useEffect(() => { const html = document.documentElement; if (darkMode) { html.classList.add('dark'); } else { html.classList.remove('dark'); } localStorage.setItem('theme', darkMode ? 'dark' : 'light'); }, [darkMode]); return ( React.createElement(React.Fragment, null, React.createElement(Navbar, { darkMode, setDarkMode }), React.createElement('main', { id: 'main-content', role: 'main' }, React.createElement(Hero, null), React.createElement(About, null), React.createElement(Skills, null), React.createElement(Projects, null), React.createElement(Contact, null), ), React.createElement(Footer, null), ) ); };