Component: App Shell
Relevant source files
The following files were used as context for generating this wiki page:
The App Shell serves as the foundational architectural layer of the Moe Kyaw Aung portfolio application. It encompasses the root entry point, global style definitions, and the high-level React component hierarchy that persists across the user experience. Its primary purpose is to initialize the application environment, manage global layout components like the Navbar, and implement smooth scrolling orchestration.
The shell integrates several third-party libraries to enhance the user interface, including Lenis for smooth scrolling, Framer Motion for animations, and GSAP for complex motion sequences. It provides the necessary containerization and global CSS reset logic required for a high-performance, visually immersive developer portfolio.
Sources: src/App.jsx:1-25, src/main.jsx:1-11, index.html:1-13
Initialization and Mounting
The application is initialized within main.jsx, which mounts the App component into a DOM element with the ID root using React's createRoot API. This process is wrapped in React.StrictMode to ensure development-time checks for side effects and deprecated APIs.
The entry point specifies a module-type script reference to src/main.jsx, which is the standard pattern for Vite-based React applications.
Sources: src/main.jsx:7-11, index.html:11-12
Core Structural Components
The App component acts as the primary layout controller. It assembles the global navigation and the main content area (currently the Home page).
| Component | Responsibility | Source |
|---|---|---|
Navbar | Provides global navigation links and branding across all views. | src/App.jsx |
Home | Serves as the primary landing page content container. | src/App.jsx |
Lenis | Orchestrates smooth scrolling behavior via Request Animation Frame. | src/App.jsx |
Sources: src/App.jsx:4-5, src/App.jsx:21-22
Smooth Scrolling Orchestration
A critical feature of the App Shell is the implementation of smooth scrolling using the Lenis library. This is handled within a useEffect hook in the root App component to ensure the scroll engine is initialized once when the application mounts.
The implementation utilizes a recursive requestAnimationFrame (RAF) loop to sync the Lenis scroll instance with the browser's refresh rate.
The easing function for the scroll transition is defined as (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), providing a logarithmic deceleration effect.
Sources: src/App.jsx:8-20, package.json:16
Global Styling and Environment
The application uses Tailwind CSS for utility-first styling, integrated via @import rules in globals.css. The global stylesheet defines the base visual identity of the shell, including a dark background (#0a0a0a) and Inter as the primary font family.
Global CSS Properties
- Scroll Behavior: Configured as
smoothat the HTML/Body level, but overridden toautowhen Lenis is active to prevent conflicts between native and virtual scrolling. - Root Container: The
#rootelement is constrained to a minimum height of100vhto ensure full-viewport rendering. - Overflow:
overflow-x: hiddenis applied to prevent horizontal layout shifts during animations.
Sources: src/styles/globals.css:1-35, index.html:6
Development Configuration
The App Shell's build and development environment is managed by Vite. The configuration ensures the React plugin is active and sets the local development server to port 3000.
Dependencies Summary
| Dependency | Version | Purpose |
|---|---|---|
react | ^18.2.0 | Core UI library |
@splinetool/react-spline | ^3.0.20 | 3D scene rendering |
framer-motion | ^10.16.4 | Declarative animations |
lenis | ^1.0.4 | Smooth scroll engine |
vite | ^4.4.5 | Build tool and dev server |
Sources: package.json:11-23, vite.config.js:4-9
Summary
The Component: App Shell provides the essential scaffolding for the Moe Kyaw Aung portfolio. By centralizing smooth scroll logic in App.jsx, global styling in globals.css, and mounting logic in main.jsx, it creates a unified environment where high-fidelity components like the 3D Hero and Magnetic Buttons can operate seamlessly. This architecture ensures that performance-intensive features like RAF-based scrolling and 3D rendering are supported by a stable and performant root structure.