+
+
{project.name}
+
-
-
james fehr
- front end designer
+
+ );
+ }
+
+ function ProjectsGrid({ visible }) {
+ if (!visible) return null;
+ return (
+
+ {projects.map((project, idx) => (
+
+ ))}
+
+ );
+ }
+
+ function AboutSection({ visible }) {
+ if (!visible) return null;
+ return (
+
+
+ - Udacity
+
+
+ - ITD Canada
+
+ Diploma in Computer Information Systems
+
+
+ );
+ }
+
+ function HamburgerMenu({ onProjectsToggle, projectsVisible, onAboutToggle, aboutVisible }) {
+ const [open, setOpen] = React.useState(false);
+
+ // Close menu on outside click
+ React.useEffect(() => {
+ function handleClick(e) {
+ if (!e.target.closest('.hamburger') && !e.target.closest('.menu-dropdown')) {
+ setOpen(false);
+ }
+ }
+ if (open) document.addEventListener('mousedown', handleClick);
+ return () => document.removeEventListener('mousedown', handleClick);
+ }, [open]);
+
+ return (
+
+
setOpen(o => !o)} aria-label="Open menu" tabIndex={0}>
+
+
+
+
-
-
-
-
-
Featured Work
-
-
-
-
-
-
-
+ );
+ }
+
+ function App() {
+ const [projectsVisible, setProjectsVisible] = React.useState(false);
+ const [aboutVisible, setAboutVisible] = React.useState(false);
+
+ return (
+ <>
+
setProjectsVisible(v => !v)}
+ projectsVisible={projectsVisible}
+ onAboutToggle={() => setAboutVisible(v => !v)}
+ aboutVisible={aboutVisible}
+ />
+
+
+
+ );
+ }
+
+ // Render hamburger menu, about, and project grid via App
+ ReactDOM.createRoot(document.getElementById('menu-root')).render();
+
+
+
-