New navigation in website

[brainless]

Tasks

• Increase the width of main content across the website by one breakpoint for larger screens
• Add a right side full-height navigation - visible in screen sizes above mobile - see section "New, full-height navigation"

New, full-height navigation

• Should have items "Blog", "Projects", "About" at the top, one per line
• After the 3 links, show small heading "My recent posts or projects"
• After the header, show 3 recent blogs, with title, truncate body to 2-3 lines each, and date
• After 3 recent blog posts, show 3 recent projects (from existing projects data)
• After 3 projects, show 3 videos (from video data)

Specific to mobile

• Top navigation should have a burger menu instead of "Blog", "Projects", "About"
• On click on burger menu, we need a full-height overlay navigation - see section "New, full-height navigation"

[brainless]

Implemented the new navigation as described in the issue. Created PR #24 for review. The implementation includes:

• Desktop navigation with recent blog posts, projects, and videos
• Mobile navigation with overlay menu
• Updated layouts to accommodate the new navigation
• Increased content width for larger screens

Please review the PR and test the implementation. Do not close this issue until manual testing is complete.

[brainless]

Fixed the mobile menu issue. The problem was that the JavaScript was not properly initializing in the Astro component-based architecture. I've updated the mobile-menu.js file to handle cases where elements might not be immediately available and to work with Astro's view transitions. Please test again.