Build Process

Relevant source files

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

• package.json
• vite.config.js
• index.html
• src/main.jsx
• src/App.jsx
• src/styles/globals.css

The build process for the Moe Kyaw Aung portfolio is centered around Vite, a modern frontend build tool that provides a fast development environment and optimized production bundles. The project architecture leverages React 18, utilizing ES modules to handle complex dependencies including 3D rendering engines and animation libraries.

This system is designed to transform JSX, Tailwind CSS, and external assets into a highly performant static site. It integrates specific plugins for React support and manages a sophisticated pipeline for handling smooth scrolling and 3D scenes.

Build Pipeline Orchestration

The orchestration of the build lifecycle is managed through defined scripts in the Node.js environment and a centralized configuration file. Vite acts as the engine that handles hot module replacement (HMR) during development and tree-shaking during the production build.

Development and Production Commands

The project defines three primary entry points for the build system:

• Dev Server: Launches the Vite development server with HMR.
• Build: Compiles the source code into optimized static assets.
• Preview: Serves the locally built production files for validation.

Script	Command	Description
dev	vite	Starts the development server on port 3000.
build	vite build	Generates the /dist folder for deployment.
preview	vite preview	Previews the production build locally.

Sources: package.json:6-10, vite.config.js:7-9

Build Configuration

The vite.config.js file configures the build environment by integrating @vitejs/plugin-react to handle JSX transformation and React-specific optimizations.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})

Sources: vite.config.js:1-10

Core Application Entry and Rendering

The build process identifies index.html as the main entry point, which subsequently loads the React application via a module script.

Bootstrap Sequence

The initialization flow starts at the HTML level and moves into the React reconciliation engine.

1. HTML Shell: The browser loads index.html which contains a root div.
2. Module Loading: The script /src/main.jsx is requested as an ES module.
3. React Mounting: ReactDOM.createRoot attaches the App component to the DOM.
4. Global Styling: The build engine injects globals.css containing Tailwind directives.

The diagram above illustrates the sequential loading of components and styles during the initial application boot.
Sources: index.html:12, src/main.jsx:1-10, src/App.jsx:7-22

Styling and Asset Processing

The project utilizes a PostCSS-based pipeline to process Tailwind CSS. The build system interprets the @import statements in the global CSS file to generate the final utility-based stylesheet.

CSS Architecture

The build process handles three main layers of styles:

• Base: Reset and standard HTML element styles.
• Components: Custom UI components and utility classes.
• Third-party: Specialized styles for smooth scrolling (Lenis) and animations.

Sources: src/styles/globals.css:1-40

Dependency Management

The build process must resolve and bundle several heavyweight libraries. The system is configured to handle:

• 3D Rendering: @splinetool/react-spline for interactive 3D scenes.
• Animation: framer-motion and gsap for high-performance transitions.
• Scrolling: lenis for smooth, inertial scrolling effects.
• Particles: react-particles for background effects.

Key Build Dependencies

Dependency	Version	Role in Build
react	^18.2.0	Core UI library.
vite	^4.4.5	Build tool and dev server.
@vitejs/plugin-react	^4.0.3	React-specific build optimizations.
@splinetool/react-spline	^3.0.20	3D scene integration.

Sources: package.json:12-25

Conclusion

The build process of the moekyawang-portfolio-V2 project is a streamlined Vite-based pipeline. It effectively manages the transition from modern React/JSX source code to a production-ready application, integrating complex 3D assets and animation frameworks through an ES module-driven architecture. The configuration ensures a consistent developer experience while maintaining high performance for the end-user through optimized bundling and smooth-scroll initialization within the core application lifecycle.