High-Level Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The project is a modern web-based portfolio application built with React and Vite, designed to provide a highly interactive and visually immersive user experience. The architecture prioritizes performance and aesthetics by integrating 3D rendering engines, smooth scrolling libraries, and advanced animation frameworks.
At its core, the application follows a single-page application (SPA) pattern where the React engine manages the DOM within a single HTML entry point. The system architecture is characterized by a component-based UI, a centralized smooth-scrolling engine, and a rich layer of visual effects including 3D scenes and particle backgrounds.
System Overview and Entry Point
The application initializes through a standard Vite-React pipeline. The index.html file serves as the container, while main.jsx bootstraps the React application by mounting the App component into the root DOM element.
The diagram illustrates the initialization sequence from the static HTML entry point to the React application mounting.
Sources: index.html:10-11, src/main.jsx:6-12
Core Frameworks and Dependencies
The project utilizes a specific stack of libraries to achieve its high-fidelity visual effects:
| Category | Library | Purpose |
|---|---|---|
| Frontend Framework | React 18.2.0 | Component-based UI management |
| Build Tool | Vite 4.4.5 | Fast development server and bundling |
| 3D Rendering | @splinetool/react-spline | Integration of complex 3D scenes |
| Animations | Framer Motion & GSAP | Declarative UI animations and timeline control |
| Scrolling | Lenis | Implementation of smooth "inertia" scrolling |
| Visual Effects | react-particles | Background particle system generation |
Sources: package.json:11-20, package.json:23-24
Layout and Scrolling Architecture
The application implements a global smooth-scrolling behavior using the Lenis library. This is initialized within the App component's useEffect hook, creating a Request Animation Frame (RAF) loop that synchronizes scrolling across the entire viewport.
The sequence diagram shows how the Lenis engine intercepts and smooths scrolling events using a continuous animation loop.
Sources: src/App.jsx:7-20, src/styles/globals.css:26-38
Component Architecture
The UI is structured into modular components, with a focus on interactive elements.
Interactive Hero Section
The Hero3D component is the primary visual driver, layering multiple technologies:
- Spline Runtime: Renders a 3D scene from a remote URL.
- Particle Background: Provides a secondary visual layer via
ParticleBg. - Framer Motion: Manages the entrance animations for text and buttons.
- Interactive Buttons: Uses custom
MagneticButtoncomponents for physics-based cursor interaction.
Sources: src/components/3D-Hero/Hero3D.jsx:7-35
Magnetic Interaction System
The MagneticButton component leverages the react-magnetic hook to create a "sticky" or magnetic effect when the user's cursor approaches the element.
import { useMagnetic } from 'react-magnetic'
export default function MagneticButton({ children, href, className }) {
const bind = useMagnetic({ strength: 0.3 })
return (
<a {...bind()} href={href} className={`inline-block ${className}`}>
{children}
</a>
)
}
Sources: MagneticButtom.jsx:3-14
Styling and Global Configuration
The project uses Tailwind CSS for utility-first styling, integrated via @import statements in globals.css. The configuration includes:
- Global Reset: Standard box-sizing and margin resets.
- Theme: Dark background (
#0a0a0a) with white text using the 'Inter' font family. - Vite Configuration: Set to run on port 3000 with the React plugin enabled.
Sources: src/styles/globals.css:1-18, vite.config.js:4-9
Conclusion
The architecture of moekyawaung-portfolio-v2 is a specialized frontend implementation focused on high-end visual delivery. By combining React's component model with specialized tools like Spline for 3D and Lenis for scrolling, it creates a cohesive, high-performance interactive environment.