Global Styles and Resets
Relevant source files
The following files were used as context for generating this wiki page:
The global styling architecture of the portfolio project is designed to provide a consistent visual foundation while supporting advanced interactive elements like 3D scenes and smooth scrolling. It utilizes Tailwind CSS as the primary utility framework, supplemented by custom CSS resets and smooth-scrolling configurations to ensure a unified user experience across different browser environments.
This system establishes the core typography, background colors, and layout constraints that allow individual components, such as the Hero3D section, to render correctly within the viewport. By centralizing these definitions, the project ensures that layout-critical properties like box-sizing and overflow behavior are applied globally.
Sources: src/styles/globals.css:1-20, src/main.jsx:1-6
Core CSS Architecture and Frameworks
The styling system is built upon a hierarchy that begins with standard HTML definitions and extends through Tailwind CSS utilities to custom global overrides.
Framework Integration
The project integrates Tailwind CSS through its standard directives. This allows the use of utility classes throughout React components like Hero3D.jsx.
| Layer | Implementation | Purpose |
|---|---|---|
| Base | @import 'tailwindcss/base' | Core resets and base element styles. |
| Components | @import 'tailwindcss/components' | Class-based component styles (if defined). |
| Utilities | @import 'tailwindcss/utilities' | Utility classes for layout, spacing, and colors. |
Sources: src/styles/globals.css:1-3, package.json:15-18
Box Model and Root Constraints
A universal selector is used to reset the box model, ensuring that padding and borders do not affect the calculated width or height of elements. The #root element, where the React application is mounted, is constrained to a minimum height of the full viewport.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#root {
min-height: 100vh;
}
Sources: src/styles/globals.css:5-9, src/styles/globals.css:23-25, index.html:11
Typography and Theming
The application defines a specific visual theme through the body selector, setting the default font stack, background color, and text color.
Global Theme Properties
- Font Family: Primary font is 'Inter', followed by system-specific sans-serif fallbacks.
- Background: A dark theme is enforced with a background color of
#0a0a0a. - Text Color: Default text is set to
white. - Overflow Control:
overflow-x: hiddenis applied to prevent horizontal scrollbars caused by animated elements.
Sources: src/styles/globals.css:11-21
Typography Implementation in Components
While global styles set the base, components use Tailwind classes to create complex text effects, such as the gradient headings found in the Hero section.
<h1 className="text-5xl md:text-7xl lg:text-9xl font-black bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent mb-6 drop-shadow-2xl">
Moe Kyaw Aung
</h1>
Sources: src/components/3D-Hero/Hero3D.jsx:26-28
Smooth Scrolling and Lenis Integration
The project implements smooth scrolling using the Lenis library. This requires specific CSS configurations to manage the relationship between the smooth-scrolling engine and the browser's native scroll behavior.
Scrolling State Logic
The interaction between the React application, the Lenis instance, and the global CSS classes is visualized below:
The CSS provides specific hooks for these states to maintain performance and prevent layout shifts during scroll operations.
Sources: src/App.jsx:8-18, src/styles/globals.css:28-44
Lenis Configuration Table
| Property | Value/Selector | Effect |
|---|---|---|
| Smooth Behavior | .lenis.lenis-smooth | Sets scroll-behavior: auto to allow Lenis control. |
| Prevent Scrolling | [data-lenis-prevent] | Sets overscroll-behavior: contain for nested scroll areas. |
| Stopped State | .lenis.lenis-stopped | Disables scrolling by setting overflow: hidden. |
| Interaction | .lenis-scrolling iframe | Sets pointer-events: none during scrolls for performance. |
Sources: src/styles/globals.css:32-44
Visual Hierarchy and Component Styles
The global styles support high-z-index components and full-screen layouts. For instance, the Hero3D component relies on the global overflow-x: hidden and scroll-behavior: smooth to maintain its full-viewport presence without breaking the page structure.
Hero Section Layering
The Hero section utilizes the foundation provided by the global resets to layer 3D scenes, particle backgrounds, and UI elements.
Summary
The global styles and resets in this project establish a dark-themed, high-performance foundation. By combining standard CSS resets with Tailwind CSS and the Lenis smooth-scrolling library, the architecture ensures that interactive 3D elements and complex animations operate within a stable and predictable layout. This configuration is essential for supporting the project's focus on "pixel-perfect experiences" and smooth transitions.
Sources: src/styles/globals.css:1-44, src/App.jsx:1-28, src/components/3D-Hero/Hero3D.jsx:31