Index HTML Layout
Relevant source files
The following files were used as context for generating this wiki page:
The Index HTML Layout defines the structural foundation of the EPIC-SUPREME-PORTFOLIO (branded as "AETHER"). It is designed as a single-page application (SPA) architecture focusing on geometric minimalism and premium user experience for an Android Architect's portfolio. The layout integrates structural HTML5 elements with CSS3 animations and a custom JavaScript "geometry engine" to manage state and interactions.
Sources: index.html:1-8, README.md:1-5
Document Head and Global Dependencies
The document head configures the technical environment, including character encoding, viewport settings for mobile responsiveness, and SEO metadata. It preloads critical assets to optimize the Largest Contentful Paint (LCP), specifically the "SF Pro" variable font.
- Primary Font: SF Pro Variable (Preloaded)
- Stylesheets:
aether-style.css - Logic:
aether-script.js(Loaded at the end of the body)
Sources: index.html:4-12, aether-style.css:25-30
Visual Components and Page Lifecycle
The layout uses three persistent top-level containers that manage the visual state and background atmosphere of the application.
Aether Loading System
The loader (.aether-loader) acts as a splash screen. It contains a loader-geometry div with multiple "geo-rings" that perform a scale and rotate animation. The AetherPortfolio class in JavaScript manages the transition from the loading state to the content state by adding a .fade class after a 2000ms delay.
Atmospheric Background
A floating-shapes container provides an animated background layer using radial gradients. It contains four distinct shapes with varying CSS variables (--delay, --duration) to create a non-uniform floating effect.
Sources: index.html:25-30, aether-style.css:73-101
Navigation Architecture
The navigation bar (.aether-nav) is a fixed-position element that provides both site-wide links and a scroll progress indicator.
| Component | Description | HTML Class/ID |
|---|---|---|
| Logo | Brand identity "AETHER" | .nav-logo |
| Links | Jump links to page sections | .nav-links |
| Progress Bar | Visual indicator of scroll depth | .nav-progress |
The updateNavProgress function calculates the ratio of window.scrollY to total scrollable height and applies a scaleX transform to the .nav-progress element.
Sources: index.html:33-46, aether-style.css:103-149, aether-script.js:90-95
Section Breakdown
The layout is divided into five primary semantic sections, each serving a specific content purpose.
1. Hero Section (#home)
Features a split-grid layout. The left side contains professional metadata, a large title with an accent, and a statistics grid. The right side contains the hero-geometry component—a complex visual structure of concentric "orbits" that rotate around a central "geo-main" element.
- Logic: The statistics (
.stat-number) are initialized with0and incremented to theirdata-countvalue via anIntersectionObserverin JavaScript.
Sources: index.html:49-84, aether-script.js:45-66
2. About Section (#about)
Utilizes a 2fr 1fr grid. It contains the "Architect" description and a meta-item list displaying Experience, Location, and Availability.
Sources: index.html:87-117, aether-style.css:262-297
3. Skills Section (#skills)
Displays a grid of skill-card elements. Each card includes a custom icon, a label, and a skill-bar.
- Skill Interaction: JavaScript monitors these bars; when they enter the viewport, it reads the
data-widthattribute and sets the CSSwidthproperty to trigger the CSS transition.
Sources: index.html:120-160, aether-script.js:68-79
4. Work Section (#work)
Displays project portfolio items in a responsive grid. Each work-item supports a 3D "tilt" effect.
- Tilt Logic: The
initTiltfunction calculates the mouse position relative to the element's bounding box and applies arotateXandrotateYtransform.
Sources: index.html:163-205, aether-script.js:81-98
5. Contact Section (#contact)
A two-column layout providing direct contact links (Email, Phone, LinkedIn) and a functional message form.
- Form Handling: The
showFormSuccessmethod intercepts the submit event, prevents the default POST, and updates the button UI to show a "Sent!" state before resetting the form.
Sources: index.html:208-243, aether-script.js:100-111
Component Class Structure
The application logic is encapsulated in the AetherPortfolio class, which manages the lifecycle and event binding for the HTML layout elements.
Sources: aether-script.js:1-115
Conclusion
The Index HTML Layout serves as a highly structured, interactive canvas for the Aether portfolio. By combining semantic sections with data-driven attributes (like data-count and data-width), it allows the JavaScript engine to dynamically animate content as the user explores the developer's professional profile and technical mastery.