Project Vision and Use Cases
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The moekyawaung-portfolio-v2 project is a high-performance, visually immersive personal portfolio website designed to showcase the work and technical expertise of a "Supreme Fullstack Developer." The project vision focuses on creating "pixel-perfect experiences" through the integration of 3D graphics, smooth scrolling mechanics, and interactive UI components. It leverages a modern React-based stack to deliver a sophisticated presentation of projects and professional identity.
Sources: package.json:1-5, src/components/3D-Hero/Hero3D.jsx:25-27
Core Architectural Vision
The project is built on the Vite build tool and React 18, utilizing a modular component architecture. The vision emphasizes a seamless user experience (UX) characterized by hardware-accelerated animations and consistent visual feedback across different device viewports.
Tech Stack Overview
| Technology | Category | Purpose |
|---|---|---|
| Vite | Build Tool | Fast development server and optimized production builds. |
| React 18 | UI Library | Component-based architecture and state management. |
| Spline | 3D Design | Rendering interactive 3D scenes directly in the browser. |
| Framer Motion | Animation | Orchestrating entrance animations and transitions. |
| Lenis | UX / Scrolling | Implementing high-performance smooth scrolling. |
| Tailwind CSS | Styling | Utility-first styling for responsive design. |
Sources: package.json:11-20, vite.config.js:1-10, src/styles/globals.css:1-3
Application Flow and Lifecycle
The application initializes through main.jsx, which mounts the App component within a React Strict Mode wrapper. The lifecycle includes the setup of a global smooth scroll instance and the rendering of interactive sections.
The diagram shows the initialization flow from the entry point to the rendering of the core visual components.
Sources: src/main.jsx:6-12, src/App.jsx:7-27, src/components/3D-Hero/Hero3D.jsx:6-15
Primary Use Cases
High-Impact Visual Presentation
The primary use case is capturing visitor attention through a 3D Hero section. This is achieved by embedding a Spline scene that serves as the backdrop for the developer's identity.
- 3D Scene Integration: Loads a hosted Spline design via the
@splinetool/react-splinelibrary. - Layered Visuals: Combines 3D elements with a particle overlay (
ParticleBg) and CSS gradients for depth.
Sources: src/components/3D-Hero/Hero3D.jsx:9-21, package.json:13
Interactive User Engagement
The portfolio uses interactive UI elements to encourage user exploration. A key implementation is the "Magnetic" button behavior, which provides physical-like feedback when the cursor nears a link.
// Implementation of the Magnetic Interaction Use Case
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:1-14, src/components/3D-Hero/Hero3D.jsx:30-45
Smooth Navigation and Scrolling
To maintain the "premium" feel, the project implements a specific scrolling use case where standard browser scrolling is replaced by a managed smooth scroll system.
The sequence shows how Lenis intercepts and smooths scroll inputs using a custom easing function.
Sources: src/App.jsx:8-18, src/styles/globals.css:25-41
Implementation Details
Styling and Layout
The project uses a "Dark Mode" aesthetic by default, defined in the global CSS.
- Background:
#0a0a0a(Pure dark). - Typography: Inter font family with white/transparent text gradients.
- Responsiveness: Uses Tailwind's responsive prefixes (e.g.,
md:text-7xl,lg:text-9xl) to scale the hero text across mobile and desktop.
Sources: src/styles/globals.css:14-17, src/components/3D-Hero/Hero3D.jsx:23-26
Component Architecture
The components are organized to separate visual effects from logic.
| Component | Responsibility | Source |
|---|---|---|
App | Orchestrates global effects (Lenis) and layout. | src/App.jsx |
Hero3D | Manages the 3D scene, particles, and main intro text. | src/components/3D-Hero/Hero3D.jsx |
MagneticButton | Wraps standard links with magnetic attraction logic. | MagneticButtom.jsx |
Navbar | Provides global navigation (Imported in App). | src/App.jsx |
Sources: src/App.jsx:21-26, src/components/3D-Hero/Hero3D.jsx:6-8
Conclusion
The vision for the Moe Kyaw Aung portfolio is to serve as a high-fidelity digital business card. By utilizing advanced libraries like Spline for 3D and Lenis for scrolling, the project achieves a level of polish that exceeds traditional static portfolios. The architecture is designed to be extensible, allowing for the addition of more project sections while maintaining the core performance and aesthetic standards set in the initial version.