Package and Dependencies
Relevant source files
The following files were used as context for generating this wiki page:
The moekyawaung-portfolio-v2 project is a modern web application built using the React framework and the Vite build tool. Its primary purpose is to serve as a high-performance portfolio featuring advanced 3D visual elements, smooth scrolling behaviors, and interactive animations.
The project leverages a specialized set of dependencies to handle complex UI requirements, including 3D scene rendering via Spline, physics-based animations via Framer Motion and GSAP, and smooth inertial scrolling through the Lenis library.
Sources: package.json:1-5, vite.config.js:1-9
Core Framework and Build Configuration
The application is structured as a React 18 project utilizing ECMAScript modules (ESM). The build pipeline is managed by Vite, which provides a fast development server and optimized production bundling.
Build Scripts
The project defines three primary lifecycle scripts for development and deployment:
| Script | Command | Description |
|---|---|---|
dev | vite | Starts the development server on port 3000. |
build | vite build | Generates optimized production assets. |
preview | vite preview | Serves the locally built production files for testing. |
Sources: package.json:7-11, vite.config.js:4-8
Build Pipeline Diagram
The following diagram illustrates the relationship between the configuration and the entry points of the application.
Sources: vite.config.js, index.html:12, src/main.jsx:6-11
Project Dependencies
The application relies on several specialized libraries to achieve its visual fidelity and interactivity.
UI and Animation Libraries
- Framer Motion & GSAP: Used for complex sequencing and layout animations.
- Lenis: Implements smooth scrolling across the application.
- react-magnetic: Provides magnetic interaction effects for UI elements like buttons.
3D and Particle Systems
- @splinetool/react-spline: Enables the integration of interactive 3D scenes directly into React components.
- react-particles & tsparticles-preset-links: Manages the background particle effects.
Dependency Table
| Dependency | Version | Purpose |
|---|---|---|
react | ^18.2.0 | Core UI library. |
react-dom | ^18.2.0 | DOM rendering for React. |
@splinetool/react-spline | ^3.0.20 | 3D scene integration. |
framer-motion | ^10.16.4 | Declarative animations. |
lenis | ^1.0.4 | Smooth scrolling engine. |
gsap | ^3.12.2 | High-performance animations. |
react-magnetic | ^0.2.0 | Magnetic hover effects. |
react-particles | ^2.12.2 | Particle background system. |
Sources: package.json:14-24
System Architecture and Integration
The dependencies are integrated into the component lifecycle to manage global behaviors like smooth scrolling and specific interactions like 3D rendering.
Smooth Scroll Implementation
The lenis library is initialized within a useEffect hook in the root App component. It uses a Request Animation Frame (RAF) loop to synchronize scrolling with the browser's refresh rate.
Sources: src/App.jsx:7-20
Component-Level Dependency Usage
Specific components utilize dependencies to enhance the user experience:
- Hero3D.jsx: Uses
Splineto load a 3D scene from a remote URL andmotionfromframer-motionfor entrance animations. - MagneticButton.jsx: Uses the
useMagnetichook fromreact-magneticto bind magnetic physics to anchor elements.
// Example of react-magnetic integration
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: src/components/3D-Hero/Hero3D.jsx:10-13, MagneticButtom.jsx:3-14
Summary
The moekyawaung-portfolio-v2 project utilizes a modern React stack optimized for high-end visual experiences. By combining Vite for performance, Spline for 3D content, and Lenis for smooth scrolling, the project establishes a robust architecture for a creative developer portfolio.