Application Lifecycle
Relevant source files
The following files were used as context for generating this wiki page:
The Application Lifecycle of the Moe Kyaw Aung portfolio is a React-based client-side process managed by Vite. It encompasses the initial bootstrapping of the DOM, the instantiation of the React component tree, and the integration of specialized third-party engines for smooth scrolling and 3D rendering.
The lifecycle starts with the delivery of a minimal HTML entry point which loads a JavaScript module. This module mounts the root React component, which then initializes global side effects such as the Lenis smooth scroll engine and high-performance visual components like Spline scenes and Framer Motion animations.
Bootstrapping and DOM Mounting
The application begins execution from the index.html file, which serves as the container for the entire Single Page Application (SPA). It defines a div with the ID root and loads the entry-point script.
The sequence begins with the browser parsing index.html, which references /src/main.jsx as a module. Inside main.jsx, ReactDOM.createRoot is used to target the DOM node with the ID root, effectively handing over control to React.
Sources: index.html:10-12, src/main.jsx:5-10
Core Application Initialization
Once React takes control, the App component serves as the orchestrator for global services and the primary layout.
Smooth Scroll Engine (Lenis)
The application utilizes the lenis library to manage scroll behavior. This is initialized within a useEffect hook in the App component to ensure it runs only once after the component mounts. The implementation uses a Request Animation Frame (RAF) loop to sync the scroll position.
The smooth scroll configuration is defined with a duration of 1.2 seconds and a custom easing function. The CSS provides supporting styles to ensure the smooth scroll works correctly with the document height.
Sources: src/App.jsx:6-20, src/styles/globals.css:19-33, package.json:15
Component Lifecycle and Visual Rendering
The application lifecycle extends into the rendering of feature-rich components like Hero3D, which integrate external assets and animation libraries.
| Phase | Description | Key Technologies |
|---|---|---|
| Mounting | Components are added to the DOM; framer-motion starts entry animations. | framer-motion |
| Asset Loading | External 3D scenes are fetched and rendered within the component. | @splinetool/react-spline |
| Interaction | Magnetic effects and hover transitions become active. | react-magnetic, gsap |
| Continuous | Particle backgrounds and scroll indicators maintain active loops. | react-particles |
Sources: src/components/3D-Hero/Hero3D.jsx:7-13, package.json:11-19, src/App.jsx:24-27
3D Scene Integration
In the Hero3D component, the lifecycle includes loading a Spline scene from a remote URL. This component is wrapped in a full-screen relative section that prevents overflow, ensuring the 3D environment stays contained within the viewport.
Build and Environment Configuration
The development and production lifecycles are governed by Vite. The project uses the @vitejs/plugin-react to handle JSX transformation and provides a local development server on port 3000.
| Command | Lifecycle Phase | Description |
|---|---|---|
npm run dev | Development | Starts Vite dev server on port 3000. |
npm run build | Production | Bundles assets using Vite's build pipeline. |
npm run preview | Deployment | Previews the production build locally. |
Sources: vite.config.js:4-9, package.json:6-10
Conclusion
The Application Lifecycle of this portfolio is characterized by a "Shell and Enhance" approach. The initial lifecycle (Vite/React) provides the shell, while the secondary lifecycle (Lenis/Spline/Framer) enhances the experience with high-fidelity visuals and smooth interactions that are initialized immediately upon component mounting.