Code Standards & Conventions
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The "moekyawaung-portfolio-v2" project is a modern web application built using React and Vite, focused on high-performance animations and 3D visual experiences. The code standards and conventions within this repository emphasize functional React components, declarative animation orchestration, and a structured styling approach using Tailwind CSS.
The architecture leverages a modular component-based structure where visual effects (3D scenes, particles) are separated from the core application logic. This wiki page outlines the implementation patterns for smooth scrolling, interactive UI elements, and project configuration.
Sources: package.json:1-5, src/main.jsx:1-10
Project Architecture & Organization
The application follows a standard React/Vite structure where the entry point initializes the React tree and injects global styles. The architecture is designed to support heavy visual libraries such as Spline, Framer Motion, and GSAP.
Component Structure
The project utilizes functional components and React Hooks (useEffect) for side effects. Components are organized by their specific visual or functional role, such as the 3D-Hero section.
The diagram above illustrates the component hierarchy from the entry point to specialized UI components.
Sources: src/main.jsx:6-9, src/App.jsx:21-26, src/components/3D-Hero/Hero3D.jsx:1-10
Dependency Standards
The project maintains a strict separation between core dependencies and development tools.
| Dependency Type | Key Packages | Purpose |
|---|---|---|
| Core Framework | react, react-dom | UI Rendering |
| Animation | framer-motion, gsap, lenis | Motion and Smooth Scrolling |
| Visuals | @splinetool/react-spline, react-particles | 3D Scenes and Backgrounds |
| Interaction | react-magnetic | Interactive UI elements |
| Sources: package.json:11-21 |
Development Workflow & Configuration
Build System
The project uses Vite as the build tool and development server. The configuration is kept minimal, primarily enabling the React plugin and defining server parameters.
- Port Configuration: The development server is set to run on port
3000. - Module System: The project uses ES Modules (
"type": "module").
Sources: vite.config.js:1-9, package.json:5
Scripting Conventions
Standardized NPM scripts are provided for development and production lifecycles:
npm run dev: Starts the Vite development server.npm run build: Generates the production build.npm run preview: Serves the production build locally for testing.
Sources: package.json:6-10
Animation & Smooth Scrolling Standards
A defining convention of this project is the implementation of a smooth scrolling environment using the Lenis library and GSAP.
Scroll Engine Implementation
The root App component initializes the Lenis scroll engine within a useEffect hook to ensure global application of smooth scrolling. It uses a custom easing function for the transition.
Sources: src/App.jsx:7-19
Styling & Global CSS
The project utilizes Tailwind CSS for styling. Global resets and scroll behaviors are defined in globals.css:
- Scroll Behavior:
scroll-behavior: smoothis applied tohtmlandbody. - Overflow:
overflow-x: hiddenis enforced on the body to prevent layout shifts during animations. - Typography: The default font is 'Inter' with a fallback to system sans-serif fonts.
Sources: src/styles/globals.css:5-18
Component-Specific Conventions
3D and Particle Overlays
The Hero3D component demonstrates the standard for layering complex visual elements. It uses absolute positioning and Z-indexing to stack the Spline scene, particles, and interactive UI content.
- Z-Index Management: UI content is assigned
z-20to stay above the 3D backgrounds. - Animation: Framer Motion's
motion.divis used for entry animations (initial, animate, transition).
Sources: src/components/3D-Hero/Hero3D.jsx:6-38
Interactive Elements
Interactive buttons utilize the react-magnetic hook to create a magnetic attraction effect. This logic is encapsulated in a reusable MagneticButton component.
// Implementation pattern for Magnetic Elements
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-16
Summary
The "moekyawaung-portfolio-v2" project follows a modern React architecture that prioritizes visual fidelity and smooth user interactions. By standardizing the use of Vite for builds, Lenis for scrolling, and Framer Motion for declarative animations, the codebase maintains a consistent approach to high-performance frontend development. The separation of global styles, component-level interactions, and 3D scenes ensures the project remains scalable and maintainable.