Backgrounds & Media Assets
Relevant source files
The following files were used as context for generating this wiki page:
The "Backgrounds & Media Assets" system in the EPIC-SUPREME-PORTFOLIO project provides the visual foundation for the "AETHER" design language. It integrates dynamic CSS-driven geometric animations, static image assets, and high-performance variable typography to create a premium, minimalist user experience.
This system is designed to maintain high performance through preloading strategies and hardware-accelerated animations while ensuring a cohesive aesthetic across different sections of the portfolio.
Geometric Background Engine
The portfolio utilizes a multi-layered background system composed of floating shapes and orbital geometries. These elements are rendered using pure CSS gradients and animated through keyframe engines to minimize reliance on heavy video or GIF files.
Floating Shapes System
The floating-shapes layer consists of several absolute-positioned div elements that move independently using CSS variables for timing.
- Logic: Each shape uses a
radial-gradientto create a soft, glowing orb effect. - Animation: The
floatkeyframe handles vertical translation and 360-degree rotation simultaneously. - Implementation: Inline styles in the HTML provide specific
--delayand--durationvalues to randomize the movement pattern.
Sources: index.html:25-31, aether-style.css:80-112
Hero Geometry
The Hero section features a complex orbital system (hero-geometry) that serves as the primary visual anchor.
- Components: Includes a central
geo-mainpulse, two concentricgeo-orbitrings, and ageo-accentfloating element. - Physics: Orbits rotate in opposite directions (
reverse) to create depth.
Sources: index.html:82-89, aether-style.css:231-285
The diagram above illustrates how specific CSS keyframe sets drive the various geometric components defined in the DOM.
Media Asset Management
The project organizes its media into a dedicated assets/ directory, categorized by their use case in the UI.
Image Assets
Static images are primarily used for personal branding and project showcases.
| Asset Path | Usage | Format |
|---|---|---|
assets/aether-bg.jpg | Fallback or main background image | JPG |
assets/profile-aether.jpg | Architect profile photo | JPG |
assets/project-1-aether.jpg | E-Commerce project preview | JPG |
assets/project-2-aether.jpg | Analytics dashboard preview | JPG |
assets/aether-shapes/shape-1.svg | Vector geometric decoration | SVG |
Sources: README.md:8-18, index.html:163, index.html:184
Visual Effects Logic
The aether-script.js file implements a "Tilt" effect for project cards, enhancing the media presentation through mouse-tracking transformations.
// Source: aether-script.js:75-80
el.style.transform = `
perspective(1000px)
rotateX(${y * 10}deg)
rotateY(${x * -10}deg)
`;
Typography & Iconography
The project treats fonts as critical media assets, utilizing modern formats to ensure sharp rendering at any scale.
Variable Fonts
The system uses "SF Pro Variable" and "Inter Variable" fonts. These are stored in the aether-fonts/ directory. The font SF-Pro-Variable.woff2 is preloaded in the document head to prevent "Flash of Unstyled Text" (FOUT).
Sources: index.html:10, aether-style.css:23, README.md:20-22
Iconography Structure
Icons for skills (Kotlin, Jetpack, Firebase, APIs) and contact methods are styled with specific CSS backgrounds and transitions.
- Skill Icons: Use a circular background (
rgba(244, 196, 48, 0.2)) and rotate 180 degrees on hover. - Contact Icons: Standardized at 50x50px with a gold color theme (
#f4c430).
The sequence diagram shows the critical path for asset loading to ensure the typography-heavy "AETHER" design renders immediately.
Loading Sequence Assets
The aether-loader provides a transition between the asset loading phase and the interactive experience. It uses a loader-geometry composed of three geo-ring elements.
- Logic: The rings use staggered
animation-delayvalues (-0.67s and -1.33s) to create a continuous, overlapping pulse effect. - Script Control: The
AetherPortfolioclass inaether-script.jsmanages the visibility of this asset, adding a.fadeclass after a 2000ms timeout.
Sources: aether-style.css:30-78, aether-script.js:12-16, index.html:15-22
In summary, the backgrounds and media assets of this project are tightly integrated through CSS-based animation and deliberate asset preloading, ensuring a high-end visual experience that is both lightweight and technically robust.