Fix mobile responsiveness gaps across Hero, Contact, and About sections

[Copilot]

Several CSS issues caused layout overflow and unintended touch interactions on small screens. Fixes three distinct problems:

Hero – profile image too large on small phones

The image-wrapper was only resized at the 968px breakpoint (280px) with no further reduction. On 320px screens, this left ~4px of margin on each side.

/* Hero.css – added inside existing @media (max-width: 480px) */
.image-wrapper {
    width: 220px;
    height: 220px;
}

Contact – hover translateX causes horizontal overflow on touch

transform: translateX(10px) on .contact-item:hover fires on tap in many mobile browsers, pushing the element outside the viewport. Disabled via both a width breakpoint and hover: none media query.

@media (max-width: 768px), (hover: none) {
    .contact-item:hover { transform: none; }
}

Also added overflow-wrap: break-word; word-break: break-word to .contact-item a, .contact-item p so long email addresses wrap instead of overflow.

About – scale(1.05) hover can bleed outside container on touch

Disabled transform: scale(1.05) on .about-image-wrapper for both narrow viewports and non-hover devices using the same dual-query pattern.

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
portfolio-zm18	Ready	Preview, Comment	Feb 26, 2026 6:07pm