UI/UX: UI Enhancements for Mobile Responsiveness and Navbar

[ojaswi1234]

🎨 The UI/UX Update

The navigation bar, "About" section, and "Features" section require enhancements for better mobile responsiveness and accessibility.

Current Design Issues

1. The navbar menu toggle lacks an aria-label, reducing accessibility for screen readers.

​2) The "About" section does not stack content correctly on mobile viewports, causing layout issues.

​3) The "Features" section is missing a structural heading, affecting page hierarchy.

Proposed Solution

• ​Replace the text-based menu toggle in the Navbar with an animated SVG hamburger icon and an aria-label.
  ​- Implement CSS media queries to ensure the "About" section content stacks into a single responsive column on smaller screens.
• ​Add an h2 title to the "Features" component with responsive font sizing so it scales correctly on narrow viewports.

Design Considerations

• Accessibility
• Visual consistency
• User flow/navigation
• Responsive design
• Dark mode support
• Other

[reach2saksham]

Hi @ojaswi1234 , can you attach an image of the 2nd point where " The About" section does not stack content correctly on mobile viewports, causing layout issues?

[ojaswi1234]

Hi @ojaswi1234 , can you attach an image of the 2nd point where " The About" section does not stack content correctly on mobile viewports, causing layout issues?

Point 2: "The About" section not stacking correctly on mobile viewports

Hi @reach2saksham, I investigated why the layout was breaking on mobile and found that the issue was being caused by an animation conflict, not just standard CSS layout rules.

The Root Cause

While About.css correctly applies flex-direction: column for mobile viewports, the GSAP timeline in app/page.jsx was applying a horizontal translation (x: 50) to the content elements.

On narrow screens, animating elements from the side forces them outside the viewport boundaries. This breaks the vertical stack and causes layout shifts.

The Fix

The issue was resolved by implementing responsive animation handling using gsap.matchMedia() in app/page.jsx.

The animation direction now adapts dynamically based on screen size:

• Desktop (min-width: 769px) → Elements animate horizontally on the x-axis
• Mobile (max-width: 768px) → Animations switch to a vertical offset (y axis)

This aligns with the stacked column layout and prevents horizontal overflow.

---

Code Implementation Summary

• app/components/About/About.css

• app/page.jsx

let mm = gsap.matchMedia();

mm.add(
  {
    isDesktop: "(min-width: 769px)",
    isMobile: "(max-width: 768px)",
  },
  (context) => {
    let { isDesktop } = context.conditions;

    const aboutTl = gsap.timeline({
      scrollTrigger: {
        trigger: ".about",
        start: isDesktop ? "top 70%" : "top 85%",
      },
    });

    aboutTl
      .fromTo(
        ".about-logo",
        { x: isDesktop ? -50 : 0, y: isDesktop ? 0 : 30, opacity: 0 },
        { x: 0, y: 0, opacity: 1, duration: 1, ease: "power3.out" }
      )
      .fromTo(
        ".about-content h2",
        // Swaps horizontal (x) for vertical (y) on mobile viewports
        { x: isDesktop ? 50 : 0, y: isDesktop ? 0 : 20, opacity: 0 },
        { x: 0, y: 0, opacity: 1, duration: 1, ease: "power3.out" },
        "-=0.8"
      )
      .fromTo(
        ".about-content p",
        { x: isDesktop ? 50 : 0, y: isDesktop ? 0 : 20, opacity: 0 },
        { x: 0, y: 0, opacity: 1, duration: 1, ease: "power3.out" },
        "-=0.8"
      );

    // ... social links animation ...
  }
);

[madhavansingh]

Hi @aniket866 and @M4dhav

I would like to work on this issue. I have gone through the requirements and will ensure a clean, minimal, and well-tested implementation following the project guidelines.

Could you please assign this issue to me? Thank you!

[ojaswi1234]

Hey @aniket866 and @M4dhav,
I’ve already opened a PR #328
that resolves this issue. Please take a look when you get a chance and share your feedback. Thanks!