Tentang Neo Brutalism
Neo Brutalism adalah evolusi modern dari Brutalism klasik — menggabungkan elemen desain yang berani, geometric, dan raw dengan estetika digital kontemporer. Gaya ini menekankan funksi, kejelasan, dan dampak visual yang kuat melalui typografi besar, kontras tinggi, dan minimalisme yang terukur.
File halaman ini terletak di: app/Views/welcome_message.php
Controller yang sesuai ada di: app/Controllers/Home.php
Prinsip Utama Neo Brutalism
Typography Ekstrem
Menggunakan font sans-serif bold dengan ukuran besar, letter-spacing lebar, dan text-transform uppercase untuk menciptakan hierarki visual yang kuat dan mudah dibaca.
Kontras Maksimal
Kombinasi warna ekstrem — hitam, putih, dan accent color terang (biasanya merah). Menciptakan visual impact yang agresif dan tidak ambiguous dalam komunikasi desain.
Geometric Shapes
Penggunaan bentuk dasar geometri (kotak, garis, segi empat) untuk menciptakan struktur dan keseimbangan visual. Sering dikombinasikan dengan border tebal dan sisi-sisi yang tajam.
Minimalis Fungsional
Menghilangkan elemen dekoratif yang tidak perlu, fokus pada fungsi. Setiap elemen visual memiliki tujuan dan berkontribusi pada komunikasi keseluruhan.
Border & Outline
Penggunaan border tebal dan solid sebagai elemen desain utama. Menciptakan pemisahan visual yang jelas dan memberikan struktur pada layout yang kompleks.
Animasi Minimal
Transisi dan animasi yang tegas dan purposeful, bukan smooth. Sering menggunakan transform dan translate untuk efek 3D yang dramatis dan impactful.
Cara Implementasi
1. Typography & Font
Gunakan monospace font seperti 'Courier New' atau sans-serif bold. Atur font-weight ke 900, tambahkan letter-spacing, dan gunakan text-transform untuk uppercase. Font-size harus besar dan dominan.
2. Color Palette
Pilih warna kontras ekstrem: background hitam (#000 atau #0a0a0a), text putih (#fff), dan accent color terang seperti merah (#ff0000) untuk highlight dan hover states.
3. Border & Outline
Tambahkan border tebal (2-4px) ke elemen utama menggunakan border-width. Gunakan kombinasi border-top, border-left, border-bottom untuk menciptakan visual hierarchy yang unik.
4. Layout Grid
Implementasikan CSS Grid atau Flexbox dengan gap yang konsisten. Struktur layout harus jelas dan terorganisir dengan baik untuk mendukung estetika geometric.
5. Geometric Elements
Tambahkan shape geometric (squares, rectangles) menggunakan div dengan border atau menggunakan SVG. Posisikan mereka secara strategis sebagai background element dengan opacity rendah.
6. Interactive Elements
Buat hover state yang tegas menggunakan background color change, transform (translate, rotate), dan box-shadow. Animasi harus cepat dan purposeful, bukan smooth.
Teknik 3D & Parallax
Implementasi Parallax
Parallax effect dalam desain ini diimplementasikan menggunakan beberapa teknik:
1. Fixed Positioning Layers
Menggunakan elemen dengan position: fixed yang bergerak pada kecepatan berbeda saat scroll.
2. CSS 3D Transform
.parallax-container {
perspective: 1000px;
}
.parallax-layer {
transform-style: preserve-3d;
transform: translateZ(var(--depth)) scale(var(--scale));
}
3. Mouse Position Tracking
JavaScript mendeteksi posisi mouse dan menghitung parallax offset untuk menciptakan efek 3D yang responsif terhadap pergerakan pengguna.
4. Card 3D Tilt
.card-3d:hover {
transform: rotateX(5deg) rotateY(-5deg);
}
Setiap card atau section memiliki 3D tilt effect saat di-hover, menciptakan kedalaman visual yang menarik.
Fitur CodeIgniter 4
MVC Architecture
Model-View-Controller pattern yang jelas untuk organisasi kode yang optimal dan maintainability tinggi.
Security
Built-in protection untuk CSRF, SQL Injection, XSS, dan fitur keamanan lainnya untuk aplikasi yang robust.
Routing
Sistem routing yang powerful dan fleksibel memungkinkan RESTful API design dengan mudah.
Database
Query Builder yang intuitif dengan support untuk multiple database systems dan transactions.
Validation
Sistem validasi form yang comprehensive dengan rules yang dapat dikustomisasi sesuai kebutuhan.
Performance
Framework yang ringan dengan loading time cepat, perfect untuk production environment.
Elemen Interaktif
Hover di atas tombol navigasi atau feature box di atas untuk melihat efek 3D dan animasi neo brutalism. Setiap element dirancang untuk memberikan feedback visual yang jelas dan impactful.