Add mobile hamburger menu and responsive design improvements

[freema]

Summary

This PR adds a mobile-first responsive design with a hamburger menu for smaller screens and improves the overall mobile experience across all breakpoints.

Key Changes

• Mobile Hamburger Menu: Added an animated hamburger button that toggles a full-screen mobile menu overlay on screens under 640px
• Responsive Breakpoints: Restructured media queries into three tiers:
  • Mobile-first styles for screens under 640px
  • Tablet styles for 640px-1023px
  • Desktop styles for 1024px and above
• Mobile Optimizations: Adjusted typography, spacing, and layout for mobile devices:
  • Reduced font sizes and padding for better mobile readability
  • Adjusted grid layouts to single or dual columns on smaller screens
  • Optimized button and form element sizing
  • Prevented horizontal overflow with proper container padding
• Navigation Updates:
  • Hidden desktop nav links on mobile/tablet, replaced with hamburger menu
  • Hidden GitHub button on mobile, included in mobile menu instead
  • Added smooth animations for hamburger icon transformation
• Mobile Menu Implementation: Full-screen overlay menu with backdrop blur effect that closes when links are clicked

Implementation Details

• Hamburger button uses three animated spans that rotate and fade to create an X icon when active
• Mobile menu uses position: fixed with inset: 0 for full-screen coverage
• Backdrop filter applied for modern blur effect with webkit fallback
• JavaScript helper function closeMobileMenu() handles menu dismissal on link clicks
• All mobile styles use max-width media queries to ensure proper cascade and override behavior

https://claude.ai/code/session_01WhXvp7Yn6zWeRnNjWMxJKS