Elegant Geometric CSS
Relevant source files
The following files were used as context for generating this wiki page:
The "Elegant Geometric CSS" system forms the visual foundation of the AETHER portfolio. It is designed to create a premium, minimalist environment where "pure minimalism meets supreme craftsmanship." The system utilizes a combination of modern CSS variables, geometric shapes, and sophisticated keyframe animations to simulate a high-fidelity, architectural user interface.
This styling system is not merely decorative but integrated into the structural layout of the application, coordinating background elements, loading sequences, and interactive components into a unified "floating geometry" experience.
Sources: README.md:3, index.html:7-8, aether-style.css:1-2
Core Design System & Variables
The architecture of the CSS is built upon a set of global variables that define the "Supreme Geometric Minimalism" aesthetic. The palette is intentionally restricted to create high contrast and a luxury feel.
Global Tokens
| Variable | Value | Purpose |
|---|---|---|
--navy | #0a0f23 | Primary background color |
--navy-light | #1a2345 | Secondary background for sections |
--gold | #f4c430 | Accent color for geometry and primary CTAs |
--white | #ffffff | Primary text and high-brightness elements |
--radius | 24px | Standard curvature for containers and buttons |
--shadow | 0 20px 60px rgba(10, 15, 35, 0.15) | Subtle depth for components |
Sources: aether-style.css:3-11
Geometric Layout & Background Engine
The system employs a multi-layered background engine that consists of static and animated geometric entities.
Floating Shapes Background
The background uses a "Floating Shapes" layer (.floating-shapes) that exists behind the main content. It features radial-gradient circles that use CSS variables to define unique animation durations and delays.
Visual representation of the background geometry layer control.
Sources: index.html:26-31, aether-style.css:76-105
Hero Geometry
The Hero section contains the most complex geometric assembly, consisting of nested circular orbits and pulsating centers.
.geo-main: A central pulse using thegeoPulseanimation..geo-orbit: Circular borders (orbit-1andorbit-2) rotating in different directions via theorbitRotatekeyframe..geo-accent: A high-visibility gold sphere that floats vertically using theaccentFloatanimation.
Sources: index.html:81-86, aether-style.css:235-274
Component Architecture
The CSS follows a modular approach to UI components, emphasizing transparency and depth (glassmorphism).
Glassmorphic Cards
Both the Skill Cards and Work Items utilize a semi-transparent white background with a thin border and backdrop filtering.
- Background:
rgba(255, 255, 255, 0.05) - Border:
1px solid rgba(255, 255, 255, 0.1) - Interactive State: On hover, cards lift by
-20pxand borders transition to the--goldcolor variable.
Sources: aether-style.css:337-347, aether-style.css:397-407
Navigation and Progress Tracking
The navigation bar (.aether-nav) is fixed and utilizes backdrop-filter: blur(20px) to maintain visibility over moving geometric background elements. It includes a nav-progress bar that expands horizontally as the user scrolls.
Logic flow for the dynamic navigation progress bar.
Motion Graphics & Keyframe Definitions
The "Geometric" aspect of the CSS is defined by five primary animation keyframes:
| Animation | Logic | Applied to |
|---|---|---|
ringFloat | Scale 0.8 to 1.2 with rotation and opacity shifts | .geo-ring (Loader) |
float | Vertical translation (-20px) with 360-degree rotation | .shape (Background) |
fadeUp | Translation from 30px to 0px with opacity 0 to 1 | Text content & Cards |
orbitRotate | Continuous 360-degree rotation | .geo-orbit |
accentFloat | Vertical translation (-15px) for floating accents | .geo-accent |
Sources: aether-style.css:53-64, aether-style.css:101-105, aether-style.css:195-200, aether-style.css:261-263, aether-style.css:271-274
Technical Implementation Details
Tilt Interaction
Interactive elements marked with data-tilt are enhanced via JavaScript to apply dynamic 3D rotation based on mouse position. The CSS handles the transition smoothing and the perspective(1000px) property to ensure depth.
// From aether-script.js:89-98
el.style.transform = `
perspective(1000px)
rotateX(${y * 10}deg)
rotateY(${x * -10}deg)
`;
Sources: aether-script.js:84-104
Loading Sequence
The .aether-loader provides a geometric entry point. It uses three concentric .geo-ring elements with offset animation delays (-0.67s and -1.33s) to create a complex rhythmic pulsing effect before the main content is revealed.
Sources: index.html:15-23, aether-style.css:35-51
Summary
Elegant Geometric CSS establishes a high-end visual language for the portfolio through the meticulous use of CSS variables, orbital animations, and glassmorphic component structures. By synchronizing background motion with interactive JavaScript-driven effects (like tilt and scroll progress), the project achieves a "Supreme" aesthetic that emphasizes modern Android architecture principles through its design execution.