Static Site Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• aether-style.css
• aether-script.js
• README.md
• assets/

The Static Site Architecture of the EPIC-SUPREME-PORTFOLIO (branded as AETHER) is built upon a high-performance, single-page application (SPA) model. It utilizes a trio of core web technologies—HTML5, CSS3, and Vanilla JavaScript—to deliver a "supreme geometric minimalism" experience. The system is designed to be lightweight, utilizing modern browser capabilities like CSS Variables, Intersection Observers, and Flexbox/Grid layouts to provide a smooth, interactive portfolio environment without the overhead of heavy frameworks.

Sources: aether-style.css:1, index.html:1-12, aether-script.js:1-5

Component Structure

The architecture is organized into a modular directory structure that separates concerns between logic, styling, and static assets. The system follows a standard GitHub Pages deployment structure.

Component	Description	File/Path
Logic Engine	Orchestrates animations, state, and user interactions.	aether-script.js
Visual Framework	Defines the "Aether" geometric design system and variables.	aether-style.css
Content Layer	Defines the semantic structure and DOM elements.	index.html
Asset Repository	Stores project images and geometric SVG shapes.	assets/
Typography	Local variable font files for performance.	aether-fonts/

Sources: README.md:1-24

Core Systems & Logic

The site is governed by the AetherPortfolio class, which serves as the central controller for the frontend lifecycle.

Lifecycle Management

The application follows a defined initialization sequence:

1. DOM Load: The script waits for the DOMContentLoaded event.
2. Constructor Execution: Queries DOM elements and triggers initial state.
3. Loading Sequence: A fixed-position loader is displayed for 2000ms before fading out via the .fade class.
4. Event Binding: Attaches observers for scroll-based animations and interactive elements.

Interaction Engine

The site employs several high-end visual features managed through JavaScript:

• Intersection Observers: Used for initCounters and initSkillBars. This ensures that animations (like counting numbers or filling bars) only trigger when the element enters the user's viewport, optimizing CPU usage.
• Perspective Tilt: The initTilt method calculates the mouse position relative to elements with the [data-tilt] attribute to apply real-time 3D rotations.
• Navigation Progress: A scroll-linked progress bar tracks the user's position relative to the document height.

Sources: aether-script.js:40-85

Design System (Geometric Minimalism)

The architectural aesthetics are defined by a CSS-driven design system centered around a "Navy and Gold" palette.

Layout Geometry

The background utilizes a "Floating Geometry Engine" where shapes are animated through CSS @keyframes.

Styling Constants

The visual identity is maintained through standardized variables:

• Primary Colors: Navy (#0a0f23) for depth, Gold (#f4c430) for accents.
• Transitions: Heavy use of cubic-bezier(0.4, 0, 0.2, 1) for high-end feel.
• Backdrop Filter: Used in the navigation (.aether-nav) for a 20px blur effect against the floating shapes.

Sources: aether-style.css:100-110, aether-style.css:195-205

Data Presentation

The site presents project data through a static grid layout defined in the HTML structure but enhanced by JS interaction.

Section	Implementation Detail	Derived From
Hero Stats	Uses data-count attributes for dynamic JS counting.	index.html:56-70
Skill Cards	Uses data-width for CSS transition-based bar filling.	index.html:125-135
Work Portfolio	Grid layout with data-tilt for 3D interaction.	index.html:158-185
Contact Form	Client-side validation with showFormSuccess handler.	aether-script.js:95-108

Sources: index.html:56-185, aether-script.js:95-108

Conclusion

The architecture of EPIC-SUPREME-PORTFOLIO demonstrates a "Performance-First" approach to static site design. By leveraging native browser APIs (IntersectionObserver, Backdrop Filters) and a class-based JavaScript structure, it achieves a high-fidelity user experience without external library dependencies, ensuring fast load times and smooth geometric animations.

Sources: aether-script.js, aether-style.css