Portfolio Showcase Integration
Relevant source files
The following files were used as context for generating this wiki page:
The Portfolio Showcase Integration in the AETHER project is a highly stylized, interactive module designed to display professional projects and technical competencies through a "geometric minimalist" aesthetic. It leverages modern web technologies including CSS Grid, Intersection Observers, and custom JavaScript animation engines to provide a seamless, high-performance user experience for presenting Android development expertise.
The system is structured as a single-page application (SPA) style interface where project data, skill metrics, and interactive components are orchestrated by a central logic controller. Key features include a specialized loading sequence, real-time scroll progress tracking, and 3D perspective "tilt" effects on portfolio items.
Sources: index.html, README.md
System Architecture
The integration follows a decoupled architecture where the visual structure is defined in HTML, aesthetic properties and animations in CSS, and interactive logic in a centralized JavaScript class.
Core Architecture Components
| Component | Responsibility | Source File |
|---|---|---|
AetherPortfolio | Main JavaScript class managing lifecycle and event binding. | aether-script.js:1-5 |
.aether-loader | Fixed-position overlay managing the initial entrance sequence. | aether-style.css:32-47 |
.work-grid | Responsive CSS Grid container for project items. | aether-style.css:385-389 |
.nav-progress | Visual indicator of scroll depth across the showcase. | aether-style.css:143-152 |
Initialization Flow
The initialization process ensures that geometry animations and data-driven components (like counters) only trigger when the user is ready.
The diagram above illustrates the startup sequence from DOM readiness to the registration of performance-optimized observers.
Sources: aether-script.js:1-30
Interactive Showcase Logic
The showcase utilizes several custom implementation patterns to enhance the presentation of "Work" and "Skills" sections.
3D Tilt Interaction
The initTilt function applies a dynamic transformation to elements marked with the data-tilt attribute. It calculates the mouse position relative to the element's center to create a perspective rotation.
// Calculation of rotation based on mouse coordinates
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:73-83
Scroll and Intersection Management
To optimize performance, the showcase does not animate all components simultaneously. It uses IntersectionObserver to trigger animations only when elements enter the viewport.
The sequence shows how the observer reduces CPU overhead by delaying execution until visual relevance is established.
Sources: aether-script.js:33-68
Project Data Integration
Project information is integrated into the .work-grid using a standardized HTML structure that supports both static content and interactive overlays.
Project Item Structure
Each project entry contains specific metadata required for the showcase:
- Image Assets: Located in
assets/project-n-aether.jpg. - Tech Stack: Defined in
.work-techspans. - External Links: Direct integration with GitHub repositories.
| Field | Data Source | Implementation |
|---|---|---|
| Project Title | h3 inside .work-info | index.html:164 |
| Description | p inside .work-info | index.html:165 |
| Technologies | span list in .work-tech | index.html:167-171 |
| GitHub URL | a.work-link href | index.html:173 |
Sources: index.html:154-175, aether-style.css:422-450
Visual Geometry and Styling
The "Aether" aesthetic is achieved through complex CSS keyframe animations and radial gradients.
Geometric Floating Engine
The background consists of several div.shape elements animated through the float keyframe.
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
100% { transform: translateY(0px) rotate(360deg); }
}
Sources: aether-style.css:87-91
Theme Configuration
The showcase uses a consistent color palette defined in CSS variables to maintain the premium "Android Architect" brand identity.
- Primary Background:
--navy (#0a0f23) - Accent Color:
--gold (#f4c430) - Border Radius:
24pxfor cards and buttons.
Sources: aether-style.css:3-12
Summary
The Portfolio Showcase Integration serves as the core functional module of the AETHER platform. By combining intersection-based triggers with 3D perspective transformations and geometric CSS animations, it provides a high-fidelity environment for demonstrating software architecture skills. The system is designed for extensibility, allowing new projects to be added by following the established work-item HTML pattern and data-tilt attributes.
Sources: index.html, aether-script.js, aether-style.css