Penerapan Desain Responsif dengan TailwindCSS pada Sistem Portofolio Mahasiswa Interaktif
Abstract
Portofolio mahasiswa merupakan media penting untuk mendokumentasikan pencapaian akademik dan non-akademik secara profesional. Namun, penyajian portofolio konvensional sering kali terbatas dalam hal aksesibilitas dan fleksibilitas, terutama ketika diakses melalui perangkat dengan ukuran layar berbeda. Penelitian ini bertujuan untuk merancang dan mengembangkan sistem portofolio berbasis web dengan desain responsif menggunakan TailwindCSS. Desain responsif memungkinkan tata letak antarmuka sistem menyesuaikan ukuran layar pengguna, seperti desktop, tablet, dan ponsel, guna meningkatkan pengalaman pengguna. Sistem ini dirancang untuk mendukung fitur utama seperti pengelolaan CV, unggahan konten, dan navigasi yang adaptif. Metode pengembangan menggunakan model Agile, yang memungkinkan iterasi berbasis umpan balik pengguna. Hasil penelitian menunjukkan bahwa desain responsif yang diterapkan dapat memastikan konsistensi tata letak dan kemudahan navigasi di berbagai perangkat. Pengujian menunjukkan bahwa semua fitur utama berfungsi dengan baik, sementara tata letak sistem tetap estetis dan fungsional di berbagai ukuran layar. Sistem ini memberikan solusi inovatif bagi mahasiswa untuk memamerkan pencapaian mereka secara profesional dan interaktif.
Kata kunci—desain responsif, portofolio mahasiswa, TailwindCSS, tata letak adaptif, pengujian black-box
References
H. Aliffudin and N. Santoso, "Pengembangan Aplikasi E-Portfolio berbasis Website," Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, Universitas Brawijaya, [Online]. Available: https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/view/12551.
G. Khan, "Build a Responsive Portfolio Website with HTML and TailwindCSS: A Beginner's Guide," dev.to, [Online]. Available: https://dev.to/gkhan205/build-a-responsive-portfolio-website-with-html-and-tailwindcss-a-beginners-guide-27fn.
Tailwind CSS. "Responsive Design." [Online]. Available: https://tailwindcss.com/docs/responsive-design.
Tailwind CSS. "Utility-First Fundamentals." [Online]. Available: https://tailwindcss.com/docs/utility-first.
UX Collective. "User Experience (UX)." [Online]. Available: https://uxdesign.cc/user-experience/home