Responsive Design Strategy

Relevant source files

The following files were used as context for generating this wiki page:

• src/styles/globals.css
• src/components/3D-Hero/Hero3D.jsx
• index.html
• src/App.jsx
• MagneticButtom.jsx

The Responsive Design Strategy for the Moe Kyaw Aung portfolio focuses on creating a seamless, high-performance user experience across varying device sizes while integrating complex 3D elements and smooth animations. The project leverages Tailwind CSS for utility-first styling and Framer Motion for adaptive animations, ensuring that the interface remains functional and visually striking from mobile devices to large desktop monitors.

The strategy encompasses viewport management, flexible layout structures, and component-level responsiveness to handle both standard HTML elements and specialized interactive features like 3D Spline scenes and magnetic interface elements.

Core Layout and Viewport Management

The application establishes a robust foundation for responsiveness through global CSS configurations and standard HTML viewport meta tags. The primary goal is to prevent horizontal overflow and ensure that the root container spans the full height of the viewport.

Global Scaling and Overflow Control

The project uses a strict overflow management system. By setting overflow-x: hidden on the html and body tags, the application prevents unwanted horizontal scrolling often caused by absolute positioning or entrance animations.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

#root {
  min-height: 100vh;
}

Sources: src/styles/globals.css:5-18, index.html:7

Smooth Scrolling Integration

The project integrates Lenis for smooth scrolling, which is configured to adapt to the scrolling behavior of the browser. This enhances the tactile feel of the responsive layout as users navigate through different sections.

The diagram shows how the Lenis smooth scroll engine hooks into the browser's requestAnimationFrame (RAF) loop to manage scroll transitions globally.
Sources: src/App.jsx:7-20, src/styles/globals.css:21-38

Component-Level Responsiveness

Individual components utilize Tailwind CSS's breakpoint system to adjust typography, spacing, and layout based on screen width.

Adaptive Typography and Spacing

The Hero3D component demonstrates the use of mobile-first breakpoints to scale text size significantly as screen real estate increases. This ensures that the branding remains impactful on large displays while remaining legible and fitting within mobile viewports.

Element	Mobile Class	Tablet (md)	Desktop (lg)
Main Heading	text-5xl	text-7xl	text-9xl
Subheading	text-xl	text-2xl	-
CTA Container	flex-col	flex-row (sm)	-
Horizontal Padding	px-4	-	-

Sources: src/components/3D-Hero/Hero3D.jsx:23-31, src/components/3D-Hero/Hero3D.jsx:36-40

Flexible Interactive Elements

Interactive components like the MagneticButton and action buttons in the Hero section transition from stacked layouts on small screens to horizontal layouts on larger screens.

<div className="flex flex-col sm:flex-row gap-6 justify-center">
  <MagneticButton href="#projects" className="px-12 py-4 ...">
    View Projects
  </MagneticButton>
</div>

Sources: src/components/3D-Hero/Hero3D.jsx:36-40, MagneticButtom.jsx:4-16

Animation and 3D Integration

The portfolio's responsive strategy extends to how it handles resource-heavy elements like 3D scenes and motion-tracked buttons.

3D Scene Scaling

The Spline 3D scene is set to absolute inset-0 w-full h-full, allowing it to act as a responsive background layer that fills the available viewport space regardless of the device aspect ratio.

The diagram illustrates the layering of the responsive 3D scene background with the UI overlay that adapts to viewport changes.
Sources: src/components/3D-Hero/Hero3D.jsx:9-14

Framer Motion Transitions

Entrance animations are optimized for mobile by utilizing relative vertical offsets (y: 50 to y: 0), which ensures that content remains within the visible bounds during the animation phase.

<motion.div
  initial={{ opacity: 0, y: 50 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 1, ease: "easeOut" }}
>
  {/* Content */}
</motion.div>

Sources: src/components/3D-Hero/Hero3D.jsx:22-26

Summary of Implementation

The responsive design is achieved through a combination of CSS foundation and React-based component logic:

1. Viewport Meta Tag: Configured in index.html to ensure 1:1 scaling on mobile devices.
2. Tailwind Breakpoints: Used extensively in JSX to toggle between layout modes (e.g., flex-col vs flex-row).
3. Adaptive 3D Rendering: The Spline component consumes the full container width and height.
4. Scroll Management: Lenis and standard CSS control prevent layout shifts during interaction.

The strategy ensures that the high-fidelity 3D experience does not compromise usability on smaller touch-screen devices.