About the Solution

Built to work immediately in any folder.

The project is modular and split into clear layers, making it easy to move, maintain, and extend.

File structure

index.html is the shell for layout, menu, and content area.
system/style.css handles design, responsiveness, and animations.
system/script.js manages routing, state, and interactions.
pages/*.html contains each view loaded dynamically.

Accessibility

The hamburger button updates aria-expanded.
The overlay traps focus and closes with ESC.
Visible focus indicators are present across the interface.
Reduced-motion preference is respected via media query.

Theme engine

CSS variables control accent, background, and text.
The theme button cycles: blue, red, green, black, yellow, brown, purple.
The choice is saved in localStorage and restored on return.

Why query routing?

The ?page=... format is robust for static hosting and avoids assumptions about where the site is mounted.