[WIP] Improve website layout for mobile and tablet responsiveness

[Copilot]

Improve Mobile and Tablet Responsiveness

Plan

• Add viewport meta tag to all HTML pages for proper mobile scaling
• Update CSS with mobile-first responsive approach
  • Convert fixed widths to flexible/percentage-based units
  • Add media queries for mobile, tablet, and desktop breakpoints
  • Improve navigation menu responsiveness
  • Ensure proper touch target sizes (minimum 44x44px for WCAG)
  • Fix image scaling and prevent horizontal scrolling
  • Adjust spacing and typography for smaller screens
• Test on standard mobile (375px) and tablet (768px) viewports
• Take screenshots to verify improvements
• Validate WCAG 2.1 AA compliance for touch targets and contrast

Current Issues

Before Screenshots:

• Desktop: https://github.com/user-attachments/assets/cfaf2c6f-af17-4c7f-ad33-e9785a9319a0
• Mobile (375px): https://github.com/user-attachments/assets/2574c95a-a9aa-4b16-ab24-34ae16726f62
• Tablet (768px): https://github.com/user-attachments/assets/e1e19d89-0f49-4076-bfcd-fd6fa31ce951
• Mobile Resume: https://github.com/user-attachments/assets/1455b072-deb4-444d-93b7-3fe4bbf98f24

Issues found:

• No viewport meta tag (causes zoom issues on mobile)
• Fixed 600px container width causes horizontal scrolling
• Fixed image and div widths don't scale
• Navigation menu has fixed left margin that doesn't work on mobile
• Text gets cut off on smaller screens

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Improve Mobile and Tablet Responsiveness</issue_title>
<issue_description>The current website layout does not fully adapt to smaller screens such as tablets and mobile devices. I need to ensure a consistent, user-friendly experience across all screen sizes.

Requirements / Acceptance Criteria:

• The website should be fully responsive on standard tablet and mobile viewports.
• Follow current responsive design standards and accessibility guidelines (WCAG 2.1 AA).
• Use modern CSS techniques (e.g., Flexbox, Grid, responsive units, and media queries).
• Navigation menus, buttons, and forms must remain functional and easy to interact with on touch screens.
• Avoid horizontal scrolling and ensure text and images resize appropriately.

Additional Notes:

• Consider implementing a mobile-first design approach.
• Review spacing, font sizes, and hit areas for touch targets.
• Check performance on slower mobile connections.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes evanowen/evanowen.github.io#1

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.