Theming and Custom Colors

Relevant source files

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

• index.html
• README.md
• aether-style.css
• aether-script.js
• aether-fonts/

The AETHER portfolio system utilizes a cohesive theming engine based on "Supreme Geometric Minimalism." This system is anchored by a dark high-contrast color palette that prioritizes legibility and premium aesthetics. The architecture relies on CSS Custom Properties (variables) for centralized color management, ensuring consistency across all UI components, from geometric background shapes to interactive skill bars and navigation elements.

The theme integrates deep architectural colors with vibrant accents to guide user attention. While the primary theme is defined in static CSS, the system includes dynamic state-based color changes driven by JavaScript, specifically during user interactions like form submissions.

Core Color Palette and Variables

The theming system is defined globally within the :root selector. This centralized approach allows for rapid global changes and maintains a strict visual hierarchy. The palette is composed of high-end professional tones including a deep navy for backgrounds and a gold accent for focal points.

Primary Color Definitions

The following variables form the foundation of the AETHER visual identity:

Variable	Value	Implementation Purpose
--navy	#0a0f23	Primary body background and loader backdrop.
--navy-light	#1a2345	Section alternating backgrounds (About, Work).
--gold	#f4c430	Accents, logos, buttons, and progress indicators.
--white	#ffffff	Primary text and high-contrast elements.
--gray-light	#f8f9ff	Subtle highlights and backgrounds.

Sources: aether-style.css:3-13, index.html:12-14

Geometric Shadow and Radius

The theme also defines structural variables for consistency in depth and shape:

• --radius: Fixed at 24px for cards and buttons.
• --shadow: A soft dark shadow for standard elements (0 20px 60px rgba(10, 15, 35, 0.15)).
• --shadow-hover: An intensified shadow for interactive states.

Sources: aether-style.css:10-12

Component Theming Logic

Components throughout the application consume the global variables to maintain a unified look. The application of these colors follows a specific functional logic:

Interactive Elements

Buttons and links use a hierarchy of gold and transparency:

• Primary Buttons: Use --gold as the background with --navy text for maximum contrast.
• Ghost Buttons: Use a transparent background with a white border that shifts to gold on hover.
• Navigation Links: Feature a gold bottom border (::after pseudo-element) that expands when a section is active or hovered.

Data Visualization and Skill Metrics

The "Mastery" section utilizes the --gold variable for data representation. Skill fills use a linear gradient from --gold to a lighter variant (#ffd65a) to create a sense of depth and activity.

Sources: aether-style.css:355-361, index.html:132-158

Dynamic and Programmatic Theming

Beyond static CSS, the system implements dynamic theming logic to provide visual feedback during functional state changes.

State-Based Color Overrides

The AetherPortfolio class in aether-script.js handles temporary color overrides. For instance, when a user successfully submits a contact form, the theme programmatically shifts from the standard color scheme to a "success" state.

showFormSuccess() {
  const btn = document.querySelector('.contact-form button');
  // ...
  btn.style.background = '#10b981'; // Programmatic shift to emerald green
  // ...
}

Sources: aether-script.js:93-100

Loading and Transition States

The theme's entry point is managed by the .aether-loader, which uses the --navy background and --gold text. This ensures the first visual element the user sees is perfectly aligned with the core brand palette before the main content fades in.

Geometric Background Theming

The project uses a "Floating Shapes" engine that applies low-opacity gold gradients to create environmental depth without distracting from content.

• Shapes: Circular divs using radial-gradient(circle, rgba(244, 196, 48, 0.1), transparent).
• Hero Geometry: Uses a geo-main pulse with the same transparent gold radial gradient, creating a cohesive atmospheric effect.

Sources: aether-style.css:80-95, aether-style.css:236-243

Summary

The AETHER portfolio's theming system is a robust implementation of CSS-driven design. By centralizing its color logic in :root variables, it maintains a premium "Android Architect" aesthetic that is both easily maintainable and highly performant. The integration of JavaScript for success-state feedback ensures that the theme is not only a visual layer but a functional component of the user experience.

Sources: README.md, index.html, aether-style.css