Floating Geometry Engine

Relevant source files

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

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

The Floating Geometry Engine is the core visual framework of the AETHER portfolio, responsible for orchestrating complex geometric animations, interactive UI elements, and scroll-driven progress tracking. It combines CSS-driven keyframe animations with JavaScript logic to create a high-performance, immersive background and interactive layer that reflects the project's "supreme geometric minimalism" aesthetic.

The engine manages three distinct layers of geometry: the preloader sequence, the ambient background floating shapes, and the interactive hero section "geo-container." These components work in tandem with the AetherPortfolio class to provide a cohesive user experience from initial page load through scroll navigation.

Sources: README.md:1-5, index.html:15-30, aether-style.css:1-10

Architecture and Components

The engine is structured as a class-based JavaScript implementation (AetherPortfolio) that interfaces with specific DOM elements defined in the HTML structure and styled via a comprehensive CSS variable system.

Core Class: AetherPortfolio

The AetherPortfolio class acts as the central orchestrator. It initializes the loading sequence, binds event listeners for interactivity, and manages the state of various UI components.

The diagram above represents the internal structure of the main controller for the Floating Geometry Engine.
Sources: aether-script.js:1-12

Component Breakdown

Component	Description	Implementation Detail
Aether Loader	A full-screen overlay with nested rotating rings.	CSS ringFloat animation with 2s duration.
Floating Shapes	Ambient radial gradient circles that move across the viewport.	CSS float animation with variable --duration.
Hero Geometry	A complex arrangement of orbits and pulsars in the hero section.	geoPulse and orbitRotate animations.
Tilt Engine	Interactive 3D rotation of portfolio items based on mouse position.	JS-driven perspective and rotateX/Y calculation.

Sources: index.html:16-29, aether-style.css:35-110, aether-script.js:65-83

Visual Logic and Animations

Scroll-Driven Progress

The engine tracks the user's vertical scroll position to update a progress bar located at the bottom of the navigation menu. This is calculated as a percentage of the total scrollable height.

The flow shows how scroll input is converted into a visual progress indicator.
Sources: aether-script.js:86-91, aether-style.css:151-160

Geometric Background Movement

The ambient background shapes use a linear infinite float animation. Each shape is assigned a unique duration and delay through CSS variables, ensuring a non-uniform, organic movement pattern.

/* Example of dynamic duration/delay configuration */
.shape.float-1 {
  animation-duration: var(--duration);
  animation-delay: var(--delay);
}

Sources: aether-style.css:87-95, index.html:26-29

Interactive Tilt Effect

For elements with the [data-tilt] attribute (primarily work items), the engine calculates the mouse position relative to the element's bounding box to apply a 3D perspective rotation.

// Logic for 3D rotation calculation
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
el.style.transform = `perspective(1000px) rotateX(${y * 10}deg) rotateY(${x * -10}deg)`;

Sources: aether-script.js:68-75

Data and State Management

The engine manages transient states such as numeric counts for statistics and skill bar widths using the IntersectionObserver API. This ensures animations only trigger when the user scrolls the elements into view.

Intersection Observation Flow

Summary

The Floating Geometry Engine provides the technical foundation for the AETHER portfolio's visual identity. By utilizing a mix of CSS keyframe animations for ambient movement and JavaScript's IntersectionObserver and event listeners for interactive logic, it maintains high performance while delivering a complex, geometry-focused user interface. The engine is modular, relying on the AetherPortfolio class to manage the lifecycle of both the preloader and the main content animations.

Sources: aether-script.js:1-100, aether-style.css:1-20