Local Development Environment
Relevant source files
The following files were used as context for generating this wiki page:
The Local Development Environment for the EPIC-SUPREME-PORTFOLIO (AETHER) project is designed as a lightweight, front-end centric workspace. It focuses on rendering a high-performance, geometric-themed portfolio using standard web technologies. The environment leverages modular assets including CSS-based animations, JavaScript interaction engines, and SVG-based geometric shapes to create a "supreme minimalism" user experience.
The system is structured to be served statically, relying on a specific directory hierarchy for fonts, styles, and scripts. Development primarily involves modifying the aether-style.css for visual design and aether-script.js for functional logic like scroll tracking and intersection observations.
Sources: README.md:1-24, index.html:1-15
File System Structure
The project follows a flat root structure with organized subdirectories for binary and vector assets. This structure is critical for relative path resolution in the development environment.
| Path | Purpose |
|---|---|
/index.html | Core entry point and DOM structure. |
/aether-style.css | Global styling and keyframe animations. |
/aether-script.js | Main interaction engine (AetherPortfolio class). |
/assets/ | Static images and project thumbnails. |
/assets/aether-shapes/ | SVG geometric components used for background depth. |
/aether-fonts/ | Local web font storage (SF Pro, Inter). |
Sources: README.md:1-24, index.html:11-13
Frontend Architecture and Rendering
The development environment utilizes a component-based approach within the HTML structure, supported by a centralized CSS variable system.
Asset Loading Flow
The environment implements a pre-rendering loader to ensure assets are ready before the UI is revealed.
The application uses a 2000ms delay in the local environment to transition from the geometric loader to the main content.
Sources: index.html:11-23, aether-script.js:10-14, aether-style.css:40-52
Geometric Rendering Engine
The visual environment is powered by a "Floating Geometry Engine" defined in the CSS. It uses absolute positioning and custom properties to manage animation timing.
| Component | Logic | Implementation |
|---|---|---|
| Floating Shapes | Radial gradients with float keyframe animations. | .shape in aether-style.css |
| Hero Geometry | Concentric geo-orbit rings with reverse rotations. | .geo-orbit in aether-style.css |
| Tilt Effect | Perspective-based rotateX and rotateY transforms. | initTilt() in aether-script.js |
Sources: aether-style.css:84-110, aether-style.js:68-87
Interaction Logic
The development environment features several observer-based systems to handle dynamic content without heavy frameworks.
System Class Diagram
The AetherPortfolio class serves as the central controller for all local interactions.
The class manages DOM elements and event listeners for the navigation progress bar, skill bar fills, and statistical counters.
Sources: aether-script.js:1-96
Data Flow: Navigation Progress
The local environment tracks vertical scroll position to update a visual progress bar.
Development Configuration
The project uses CSS Variables (Custom Properties) to maintain a consistent theme across the local environment.
:root {
--navy: #0a0f23;
--white: #ffffff;
--gold: #f4c430;
--navy-light: #1a2345;
--radius: 24px;
}
Sources: aether-style.css:3-13
Technical Summary
The local development environment for EPIC-SUPREME-PORTFOLIO is a zero-dependency architecture. It relies on the AetherPortfolio class to manage the lifecycle of the application—from the initial geometry-based loading sequence to the intersection-observed skill and stat animations. Development requires a standard web server to correctly resolve relative paths for the assets/ and aether-fonts/ directories as specified in the project manifest.
Sources: README.md:1-24, index.html:1-15, aether-script.js:98-100