ZYLYF – Premium Brutalist Portfolio HTML Template
Professional manual structural setup for elite aesthetics, WebGL performance, and seamless user experiences.
01. Overview & Core Features
ZYLYF is a modern premium HTML template designed for elite creative agencies, digital studios, branding teams, and visual showcase websites. Its design language combines brutalist typography, Aetheris WebGL engines, and polished interaction details.
- WebGL Metaball Sliders: High-end, performant 3D slider powered by WebGL & the Aetheris engine.
- 100% Vanilla JS: Zero jQuery dependencies. Built entirely with native ES6+ features for top performance.
- Brutalist UI & Fluid Typography: Bold brutalist typography scales perfectly across all devices using CSS clamp().
02. Included Content & Layouts
The package contains 17+ static production files built for high-end customization variants:
| File Target | Context Layout |
|---|---|
| index.html | Main Portfolio (Split Layout Concept) |
| index-3.html | Aetheris Infinite Slider (WebGL Slider Engine) |
| index-7.html | Minimal Portfolio Entry Design |
| about.html | Agency About Narrative & Profiles |
| work.html | Showcase Gallery & Core Project Grid |
| single-post.html | Case Study Deep-Dive Layout |
03. CSS Variable Map System
Customize the entire project identity globally by modifying the clean architecture variables inside the root system of assets/css/style.css:
:root {
/* Brand System Accent Colors */
--cpf-color-white: #ffffff;
--cpf-color-dark: #0a0a0a;
--cpf-color-light: #f5f5f5;
--cpf-color-page-bg: #121212;
/* Typography Fluid Layout Scale */
--cpf-font-display: 'Geist', sans-serif;
--cpf-font-body: 'Inter', sans-serif;
}
04. Clean File Structure
zylyf/
├── index*.html (Home variants)
├── about.html, work.html, services.html, etc.
└── assets/
├── css/
│ └── style.css (Core design system)
├── js/
│ ├── main.js (Interaction engine)
│ ├── tft-webgl-metaballs.js (Slider engine)
│ └── tft-mb-fx.js (UI sync)
└── img/
└── (Asset library)
05. Customization & Code Guidelines
- Immutable BEM Classes: All elements follow strict BEM structures for predictable styling.
- Object Namespacing: All template logic is cleanly encapsulated within a single Global Object workspace to prevent conflicts.
- Zero Dependencies: No jQuery, React, or Tailwind overhead—built entirely with pure, native web standards.
Note: Images used in the live preview are for demonstration purposes and are replaced with placeholders in the main download package.