3 Bugs I Fixed in My React Portfolio (Mobile Menu, Canonical Tags, Image Sizing)

#react #webdev #seo #tailwindcss

I recently built my portfolio with React, TypeScript, Tailwind and Vercel. After launching it, I hit three bugs that were easy to miss but hurt real visitors. Here is what went wrong and how I fixed each one.

1. The mobile menu that never opened

On phones, tapping the hamburger icon dimmed the screen and turned the icon into an "X", but the menu links never appeared.

What I learned:

A dimmed backdrop plus an "X" means your state toggle works. The problem is the panel itself.
Check your CSS variables first. If something like --mobile-menu-bg is undefined, the panel can be transparent.
Animations that start at opacity: 0 can get stuck invisible.
A parent with overflow: hidden or transform can clip an absolute child.

The fix: render the panel as position: fixed, give it a solid background with a fallback value, and keep it above the backdrop.

<div
  id="mobile-menu"
  className="fixed inset-x-3 top-20 z-[110] rounded-2xl bg-[var(--mobile-menu-bg,#0b1530)] p-2"
>
  {links.map((l) => (
    <a key={l.href} href={l.href} className="flex min-h-[48px] items-center px-4 text-white">
      {l.label}
    </a>
  ))}
</div>

Also keep touch targets at least 44px, close the menu on link click, outside click and the Escape key, and add aria-label and aria-expanded to the button.

2. Google refused to index my /portfolio page

Search Console said: "Alternate page with proper canonical tag".

URL Inspection showed the user-declared canonical was my home page (/) instead of /portfolio. A single hard-coded canonical in index.html was shared by every route, so Google treated each page as a duplicate of the home page.

The fix: set the canonical per route.

import { useEffect } from "react";

const SITE = "https://your-domain.com";

export function useCanonical(path: string) {
  useEffect(() => {
    let link = document.querySelector<HTMLLinkElement>('link[rel="canonical"]');
    if (!link) {
      link = document.createElement("link");
      link.rel = "canonical";
      document.head.appendChild(link);
    }
    link.href = `${SITE}${path}`;
  }, [path]);
}

Give every route its own title and meta description too, and list all routes in sitemap.xml.

3. Images that looked wrong on different screens

My profile photo was too big on small phones and too small on large screens.

The fix: size it with clamp() and keep the aspect ratio fixed.

.profile-photo {
  width: clamp(200px, 60vw, 440px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
}

Add width and height attributes to avoid layout jumps, set max-width: 100% on images, and always include <meta name="viewport" content="width=device-width, initial-scale=1">.

Quick checklist

[ ] Test the mobile menu on a real phone, not only desktop resize
[ ] Check the canonical tag on every route
[ ] Verify pages in Google Search Console's URL Inspection
[ ] Test at 360px, 390px, 768px, 1280px and 1920px widths

Wrapping up

None of these bugs showed up in a quick desktop check, but they affected real users and search visibility. Test on phones, and inspect what Google actually sees.

You can see the portfolio here: ritika-rajput-portfolio.vercel.app

I also share videos on my YouTube channel, RitikaMoments.

What was the last "invisible" bug you found in your own project? Tell me in the comments.

DEV Community