I can see the issue - there's a large empty space where the profile image should be on mobile. The image container is taking up too much width and creating overflow. Let me fix this by properly hiding or adjusting the profile image on mobile screens.

I can see the issue - the profile image container is visible on mobile and taking up space even though the grid should be single column. The image is not hidden on smaller screens, causing overflow. Let me fix this by hiding the image on mobile and adjusting the layout.

I've fixed the mobile gap issue by hiding the profile image on mobile and tablet screens using hidden md:flex. The image now only displays on medium screens and larger (md breakpoint and above), eliminating the large empty space you saw on mobile. This gives the text content proper breathing room on smaller devices while keeping the beautiful profile photo visible on desktop.

Now I can see the issues clearly. The problem is in globals.css - the body::before pseudo-element and background effects are using 100% width/height but there's no overflow restriction, and the canvas in hero.tsx is setting window.innerWidth which can cause overflow. Let me fix these issues:

I've fixed the mobile overflow issue by:

1. Added overflow-x: hidden to both html and body in globals.css to prevent any horizontal scrolling
2. Ensured canvas has proper width constraints by adding w-full h-full classes in the hero section
3. Made gradient blobs responsive - they now scale down on smaller screens (300px on mobile, 500px on desktop) to prevent overflow
4. The fixed positioning elements now respect viewport boundaries and won't cause horizontal scrollbars

The empty black space on the right side should now be completely eliminated on mobile devices, and the layout will properly fit within the screen width.