Directory Structure

Relevant source files

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

• src/components/3D-Hero/Hero3D.jsx
• src/styles/globals.css
• MagneticButtom.jsx
• index.html
• package.json
• src/App.jsx
• src/main.jsx
• vite.config.js

The moekyawaung-portfolio-v2 project is a modern web application built using React and Vite, designed to showcase a developer portfolio with advanced 3D elements and smooth animations. The directory structure follows a standard React-Vite pattern, organizing source code within the src directory while keeping configuration and public assets at the root.

The project leverages a component-based architecture where UI elements like the 3D Hero section and navigation components are decoupled. It integrates sophisticated libraries such as Spline for 3D scenes, Framer Motion for UI animations, and Lenis for smooth scrolling effects.

Sources: package.json:1-25, index.html:1-13, src/main.jsx:1-10

Root Directory

The root directory contains project-wide configuration files and the entry point for the browser.

File	Purpose
index.html	The main HTML document that serves as the mounting point for the React application.
package.json	Defines project dependencies, scripts, and metadata.
vite.config.js	Configuration for the Vite build tool, including plugin definitions and server settings.
MagneticButtom.jsx	A utility component for magnetic button interactions located at the root level.

Sources: index.html:10-12, package.json:1-25, vite.config.js:1-9, MagneticButtom.jsx:1-15

Application Entry Flow

The application initializes from index.html, which loads the module script src/main.jsx. This script then renders the App component into the root DOM element.

The diagram shows the initialization sequence from the HTML entry point to the React component tree.
Sources: index.html:12, src/main.jsx:6-9, src/App.jsx:7-27

Source Directory (src/)

The src directory houses the core logic and assets of the application.

Entry and Core Logic

• main.jsx: The JavaScript entry point that uses ReactDOM.createRoot to mount the application. It also imports the global CSS file.
• App.jsx: The root React component. It initializes the Lenis smooth scroll engine using a useEffect hook and defines the high-level layout of the application by rendering the Navbar and Home components.

Sources: src/main.jsx:1-10, src/App.jsx:7-27

Components Directory (src/components/)

The components are organized into feature-specific subdirectories.

3D Hero Feature (src/components/3D-Hero/)

This module handles the landing experience of the portfolio.

• Hero3D.jsx: A complex component that integrates the @splinetool/react-spline library to display a 3D scene. It also uses framer-motion for entrance animations of text content.
• ParticleBg.jsx: (Inferred from import) A component providing a particle background overlay.
• MagneticButton.jsx: (Inferred from import) A specialized button component providing magnetic hover effects, used within the Hero section.

Sources: src/components/3D-Hero/Hero3D.jsx:1-62

Styles Directory (src/styles/)

• globals.css: Contains the global CSS rules, including Tailwind CSS imports and custom resets. It defines the application's base theme, such as the background color (#0a0a0a) and default font family (Inter). It also includes specific styling for Lenis smooth scrolling.

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

Dependency Architecture

The project relies on several key libraries to achieve its visual fidelity and performance.

Dependency	Category	Usage
react / react-dom	Framework	Core UI library.
@splinetool/react-spline	3D Rendering	Loading and displaying Spline 3D scenes.
framer-motion	Animation	Declarative UI animations and transitions.
lenis	UX / Scrolling	Implementation of smooth scrolling.
gsap	Animation	Advanced programmatic animations.
react-magnetic	Interaction	Used for the "magnetic" button effect.
vite	Tooling	Build tool and development server.

Sources: package.json:11-20, src/components/3D-Hero/Hero3D.jsx:2,20

Component Hierarchy and Data Flow

The following diagram illustrates how the primary components interact and are structured within the application.

This diagram visualizes the component nesting from the root App component down to the specialized 3D Hero components.
Sources: src/App.jsx:23-28, src/components/3D-Hero/Hero3D.jsx:10-45

Build and Environment Configuration

The project uses Vite for its development environment and build pipeline.

• Vite Config: The vite.config.js file configures the @vitejs/plugin-react for JSX transformation and sets the development server to run on port 3000.
• Scripts: The package.json defines standard scripts: dev for development, build for production bundles, and preview for testing production builds locally.

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

Summary

The directory structure of moekyawaung-portfolio-v2 is designed for a high-performance React application. It separates concerns between global styling, component logic, and high-level application orchestration. By utilizing a modular component architecture in the src/components/ directory, the project maintains clarity despite the complexity of integrating 3D scenes and custom animation engines.