Blog Magang BPS

Ringkasan Proyek

Blog Magang BPS Buleleng adalah platform dokumentasi digital yang saya kembangkan untuk mencatat pengalaman dan pembelajaran selama magang di Badan Pusat Statistik (BPS) Kabupaten Buleleng. Blog ini berfungsi sebagai jurnal online yang menampilkan kegiatan harian, pencapaian, dan refleksi pembelajaran selama periode magang dari 19 Februari hingga 12 Juli 2024.

Sebagai pengembang tunggal, saya merancang dan mengimplementasikan seluruh sistem blog mulai dari desain antarmuka, struktur konten, hingga fitur interaksi. Blog ini menggunakan teknologi seperti JavaScript dan Tailwind CSS untuk menciptakan pengalaman pengguna yang responsif dan menarik.

Linimasa

Feb 2024 - Jul 2024

Tipe Proyek

Proyek Pribadi

Frontend Developer & UI Designer

Blog Magang BPS

Dokumentasi Pengalaman Magang

Fitur Utama Blog

Fungsi-fungsi utama yang saya implementasikan dalam blog dokumentasi magang

Katalog Postingan

Sistem navigasi dan kategorisasi postingan blog berdasarkan kegiatan magang tiap bulan, di mana setiap postingan memuat informasi kegiatan, tanggal pelaksanaan, serta manfaat yang diperoleh dari masing-masing kegiatan.

Mode Gelap

Fitur dark mode yang dapat disesuaikan untuk kenyamanan membaca dalam berbagai kondisi pencahayaan, mengurangi ketegangan mata dan menghemat daya baterai pada perangkat mobile.

Desain Responsif

Antarmuka yang dioptimalkan untuk semua perangkat dengan layout adaptif yang memastikan pengalaman membaca yang optimal baik di desktop, tablet, maupun smartphone.

Antarmuka Blog

Desain dan tata letak blog yang saya kembangkan untuk dokumentasi magang

Section Aktivitas Magang

Section aktivitas magang menampilkan ringkasan pengalaman magang dalam bentuk timeline interaktif. Setiap kartu postingan menampilkan judul, tanggal, dan cuplikan konten. Pengunjung dapat dengan mudah menelusuri kronologi magang dari awal hingga akhir.

Pengguna dapat melihat secara detail kegiatan magang dengan mengklik "Read More", dalam halaman detail kegiatan terdapat informasi secara lengkap mengenai kegiatan, tanggal, dokumentasi, serta manfaat yang diperoleh dari masing-masing kegiatan magang.

Halaman utama blog magang dengan timeline interaktif

Section aktivitas magang

Halaman detail aktivitas magang

Tampilan Responsive Pada Smartphone dan Tablet

Tampilan Responsive Pada Komputer

Tampilan Responsif Multi-Device

Sistem ini dirancang dengan pendekatan mobile-first yang memastikan pengalaman pengguna yang optimal di berbagai perangkat. Desain responsif adaptif secara otomatis menyesuaikan tata letak, ukuran font, dan navigasi sesuai dengan ukuran layar perangkat.

Fitur responsivitas mencakup tiga breakpoint utama untuk mendukung tiga kategori perangkat:

Desktop/Laptop (1200px+) - Tampilan lengkap dengan sidebar navigasi, grid multi-kolom, dan fitur hover effects untuk pengalaman pengguna yang kaya

Tablet (768px - 1199px) - Layout yang dioptimalkan dengan navigasi yang disederhanakan, konten yang tetap mudah diakses tanpa perlu zoom atau scroll horizontal

Smartphone (≤767px) - Desain mobile-friendly dengan hamburger menu, touch-friendly buttons, dan konten yang ditampilkan dalam single column untuk kemudahan navigasi dengan satu tangan

Implementasi Teknis

Teknologi dan pendekatan pengembangan yang saya gunakan

Implementasi Frontend

Sebagai pengembang frontend, saya mengimplementasikan fitur-fitur berikut:

1

Responsive Layout

Mendesain layout adaptif dengan Tailwind CSS untuk semua ukuran layar

2

Smooth Scroll Animations

Menggunakan AOS (Animate On Scroll) untuk animasi elemen yang muncul saat scrolling dengan berbagai efek transition

3

Dark Mode

Menggunakan JavaScript untuk toggle dark mode dengan class Tailwind dan menyimpan preferensi pengguna menggunakan localStorage.

Tumpukan Teknologi

JavaScript

ES6+ untuk interaktivitas, manipulasi DOM, dan fitur dark mode

Tailwind CSS

Framework CSS utility-first untuk styling responsif

HTML5

Semantic HTML untuk struktur konten yang baik

AOS Library

Animate On Scroll untuk efek animasi saat scrolling

Kunjungi Blog Magang