Proyek ini adalah penugasan magang untuk Task 2 - Frontend Developer Intern pada ekosistem Educativa.id. Seluruh pengerjaan berfokus pada redesign UI/UX (landing page) menggunakan identitas visual resmi, manipulasi DOM mentah (Vanilla), dan peningkatan desain responsif berskala industri.
Sesuai dengan instruksi dan modifikasi penyempurnaan skala interaktif terkini, berikut adalah fitur-fitur yang telah disematkan di dalam proyek:
- Halaman Karir & Filter Real-Time: Laman sekunder (
karir.html) yang didedikasikan untuk menjabarkan daftar rekrutmen talenta, dilengkapi tata letak Grid Cards dan fungsionalitas Radio Button Custom berskripta murni penyaring posisi pekerjaan antar Divisi secara instan (live filtering). - Pop-Up UI Autentikasi Modern: Fasad layar berlapis glassmorphism untuk proses Login dan Register berawal dari klik tombol Masuk dari Navigasi. Menampilkan pergantian dinamis tab (smooth switch-tab) tanpa reload komponen dan detektor click outside to close.
- Drag-to-Scroll Slider Custom Cursor: Khusus di baris-baris slider (seperti tab Layanan / Mentor), sistem dirancang kebal text-highlighting blocking dan bisa langsung diseret memakai mouse di perangkat Desktop - visual ini digayakan lebih fluid berkat injeksi Kursor Tangan Hitam/Putih SVG Custom.
- Layout Struktur Premium (Color Blocks Boundary): Redesain tata letak yang menggunakan metode blok seling warna (Navy/Deep Teal pada area Dukungan Software / Hero) sebagai jembatan color break pemisah secara dinamis di antara seksi berwarna putih, meningkatkan pancingan indra penglihatan.
- Infinite Animasi Marquee Horizontal & Vertikal: Daftar ratusan logo Client Partnership maupun bilik Testimonials berjalan berurutan tiada henti menyelimuti ruang mempresentasikan portofolio reputasional situs dengan teknik standar korporasi atas.
- Interactive Kelas Riset Modal: Mengimplementasikan arsitektur Pop Up Full-Screen memamerkan koleksi Course Database komprehensif (fitur pencarian real time / Filter tag all) dengan notifikasi Toast Alert ketika menyentuh keranjang.
- Responsive-First UI/UX Engineering: Kode Media Queries optimal yang mendeteksi ketat perubahan ukuran Viewport piranti (Mobile, Tablet/iPad, Layar 1080p Desktop), mengompakkan proporsi bingkai dari Flex/Grid, hingga menetrionalkan jarak elemen.
- Official Brand Palette Integration: Adaptasi identitas korporat penuh (Teal/Cyan khas logo Educativa dipadu warna senada aksen mentega Golden Yellow Call-to-Action) lengkap dengan standardisasi UI border-radius 16px-24px ala Start-Up Tech masa depan.
Sesuai dengan ketentuan larangan kerangka kerja (Library/Framework), proyek ini dibangun dengan memanifestasikan 100% Pure Vanilla Web Technologies:
- HTML5 Semantic
- CSS3 (CSS Variables, Flexbox, CSS Grids, Keyframe Animations, Complex Modals)
- Vanilla JavaScript (DOM Manipulation, Array Object Mapping, Event Dispatchers)
Proyek ini tidak difasilitasi oleh pengaturan Node Backend atau Server-side rendering, sehingga sangat mudah dan instan untuk diakses oleh tim validasi:
- Clone atau akses repositori fisik folder proyek ini di komputer Anda.
- Buka dan navigasi ke folder root.
- Buka (Klik 2x) berkas
index.htmlmenggunakan Browser andalan Anda secara langsung (Google Chrome, Edge, Safari, dll). - Selesai! Project sudah berjalan dan dapat diinspeksi.
💡 Tip Inspeksi Responsive: Diharapkan penguji menggunakan fitur DevTools / Inspect Element (F12) untuk menjalankan simulasi Mobile dan Tablet.