Client-Side Interactivity

The client-side interactivity of the AETHER portfolio project is managed through a central JavaScript engine that coordinates visual effects, state transitions, and user input. The system is designed to enhance the "geometric minimalism" aesthetic using real-time DOM manipulation, intersection observers for scroll-triggered animations, and event-driven UI updates.

The core logic is encapsulated within the AetherPortfolio class, which initializes upon the DOMContentLoaded event. This class-based architecture ensures that all interactive components—ranging from the initial loading sequence to dynamic form handling—are managed within a unified scope.

Sources: aether-script.js:1-112, index.html:245-247

Core Architecture and Lifecycle

The interactivity layer follows a strict lifecycle: instantiation, initialization of DOM references, and binding of event listeners. The application uses IntersectionObserver to trigger performance-heavy animations only when elements enter the viewport.

Application Lifecycle Flow

The following diagram illustrates the initialization and execution flow of the client-side engine.

The application uses a 2000ms timeout to transition the aether-loader before exposing the main content.
Sources: aether-script.js:3-33, aether-style.css:36-47

Interactive Components

1. Scroll-Triggered Progress and Animations

The system monitors the vertical scroll position to update a navigation progress bar and trigger section-specific animations. The navigation progress is calculated as a percentage of the total scrollable height.

The initCounters function specifically uses a 30ms interval to increment numbers from 0 to the value specified in the data-count attribute.
Sources: aether-script.js:38-71, aether-script.js:100-105

2. Geometric Tilt Effect

A custom mouse-tracking algorithm applies 3D transformations to elements tagged with data-tilt. This creates a perspective-based parallax effect as the user moves their cursor over portfolio items.

Form Processing and State Feedback

The portfolio includes a managed contact form that intercepts the default submission behavior to provide visual feedback.

  showFormSuccess() {
    const btn = document.querySelector('.contact-form button');
    const original = btn.textContent;
    
    btn.textContent = 'Sent! ✨';
    btn.style.background = '#10b981';
    
    setTimeout(() => {
      btn.textContent = original;
      btn.style.background = '';
      document.querySelector('.contact-form').reset();
    }, 2000);
  }

Sources: aether-script.js:107-118, index.html:229-234

Visual Engine Configuration

The CSS layer provides the underlying configuration for interactive states, utilizing CSS variables for consistent theming during JavaScript execution.

Sources: aether-style.css:3-17, aether-style.css:21-23

The client-side system effectively bridges the gap between static HTML/CSS and a dynamic user experience by leveraging modern Web APIs like IntersectionObserver and CSS transforms. This architecture ensures high performance by deferring animation logic until necessary and maintaining a clean separation of concerns within the AetherPortfolio class.