Directory Structure Analysis

Relevant source files

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

• README.md
• index.html
• aether-style.css
• aether-script.js
• assets/aether-shapes/shape-1.svg (Referenced via directory mapping)

Introduction

The EPIC-SUPREME-PORTFOLIO project, also known as AETHER, is a premium Android Developer portfolio designed with a focus on geometric minimalism and modern web architecture. The project follows a flat root-level structure for core logic files, while offloading static resources into specialized subdirectories. This organization ensures a clean separation between the document structure (index.html), visual styling (aether-style.css), and the "floating geometry engine" responsible for interactive elements (aether-script.js).

Sources: README.md:1-5, index.html:6-12

Core Application Components

The root directory contains the entry point and the primary configuration for the Aether experience. The architecture relies on three primary files that form the core of the portfolio.

File	Purpose	Description
index.html	Entry Point	Defines the geometric HTML structure and section anchors.
aether-style.css	Styling Engine	Contains supreme geometric minimalism definitions and animations.
aether-script.js	Logic Engine	Handles UI interactions, tilt effects, and progress tracking.

Sources: README.md:3-6, aether-style.css:1-10, aether-script.js:1-5

Resource Categorization

Static assets are organized into two primary subdirectories to maintain scalability:

• assets/: Contains visual media including background images, profile photos, and project-specific imagery. It also contains a aether-shapes/ subdirectory for SVG-based geometric elements.
• aether-fonts/: Dedicated to typography, hosting variable font files like SF-Pro-Variable.woff2 and Inter-Variable.woff2.

Sources: README.md:8-23, index.html:11-11

System Architecture and Data Flow

The project operates as a Single Page Application (SPA) driven by a centralized JavaScript class, AetherPortfolio. This class coordinates between the DOM elements defined in index.html and the CSS transitions defined in aether-style.css.

Initialization Flow

When the DOM is loaded, the system initializes the AetherPortfolio controller, which triggers a sequence of UI setup routines including loading screen management and intersection observers for scroll-based animations.

The diagram above illustrates the sequence of operations from page load to content reveal, emphasizing the logic-driven initialization of UI components.
Sources: aether-script.js:1-15, aether-style.css:32-50

Asset Hierarchy Analysis

The assets/ directory is structured to separate branding from project content. This distinction is critical for maintaining the "Supreme Geometric" aesthetic.

Directory Mapping

The tree structure demonstrates the clear separation of concerns, where logic remains at the root while resources are nested by type.
Sources: README.md:1-23

Technical Implementation Details

CSS Component System

The directory relies heavily on a centralized CSS variable system defined in the :root of aether-style.css. This allows for global theme management (Navy, White, Gold) and consistent spacing.

/* Path: aether-style.css */
:root {
  --navy: #0a0f23;
  --gold: #f4c430;
  --radius: 24px;
  --shadow: 0 20px 60px rgba(10, 15, 35, 0.15);
}

Sources: aether-style.css:3-12

JavaScript Logic Modules

The AetherPortfolio class encapsulates several distinct functional modules that interact with specific HTML IDs and classes:

• Tilt Module: Targets elements with [data-tilt] attribute to apply perspective transforms.
• Observer Module: Uses IntersectionObserver to trigger stat-number counting and skill-fill width transitions only when they enter the viewport.
• Progress Module: Listens to the scroll event to calculate window.scrollY / totalHeight and updates the .nav-progress element's scaleX.

Sources: aether-script.js:33-90, index.html:26-34

Summary

The directory structure of the EPIC-SUPREME-PORTFOLIO is optimized for a high-performance, single-page portfolio. By isolating the geometric engine logic in aether-script.js and styling in aether-style.css, the project maintains a clean root directory while effectively managing complex assets and custom typography in dedicated subfolders. This architecture supports smooth animations and interactive components like the geometric loader and tilt-enabled project cards.