Link CV :
Langkah-Langkah Membuat CV :
1. Menggunakan referensi UI untuk CV dari Behance, kemudian melakukan redesign menggunakan Figma
2. Menggunakan bahasa pemrograman HTML dan CSS dengan framework Bootstrap 5.
Tujuan menggunakan Bootstrap 5 yaitu supaya web dapat berjalan secara responsive.
3. Membuat Landing Page
Pada tampilan landing page terdapat navigation bar yang terdiri dari 4 menu, yaitu Home, About, Experiences, dan Contact. Apabila salah satu menu ini diklik maka tampilan akan terscroll ke bawah sesuai masing-masing section menu. Tampilan Home seperti gambar diatas yang berisi navigation bar dan identitas singkat. Section About berisi identitas diri, section Experiences berisi pengalaman project dan kegiatan yang pernah diikuti, dan section Contact berisi informasi kontak yang dapat dihubungi.
Navigation bar menggunakan navbar-toggler agar navigation bar dapat di extend atau pun collapse sesuai dengan screen size dengan membuat sebuah navbar class yang digunakan untuk responsive collapse class. Sehingga ketika screen size menjadi kecil, navbar muncul sebagai tampilan menu yang dapat diakses dengan mengklik hamburger icon pada pojok kanan atas layar, seperti pada gambar berikut
Menggunakan tipe fixed untuk background-attachment
supaya gambar yang digunakan untuk background tidak bergerak atau ter-scroll
ketika meng-scroll ke atas atau ke bawah.
4. Membuat Konten Section About
Pada tampilan section About terdapat
informasi identitas diri, seperti Full Name, Student ID atau NRP, dan Birth
Date, profil singkat, dan pendidikan yang sudah ditempuh. Section ini dibagi
menjadi dua kolom, yaitu kolom kiri yang berisi nama section, Full Name,
Student ID, dan Birth Date. Sementara itu, pada kolom kanan berisi About Me
dan Education. Kemudian, pada kolom
kanan dibagi menjadi dua row, dimana row pertama berisi About Me dan row kedua
berisi Education.
5. Membuat Konten Section Experiences
Pada tampilan section Experiences
terdapat informasi pengalaman project yang pernah dikerjakan dan kegiatan yang
pernah diikuti. Section ini dibagi menjadi dua kolom, yaitu kolom kiri yang
berisi nama section dan kolom kanan yang berisi isi section. Kemudian, pada
kolom kanan dibagi menjadi beberapa row, dimana masing-masing row berisi pengalaman
project yang pernah dikerjakan dan kegiatan yang pernah diikuti.
Pada tampilan section Contact
terdapat informasi mengenai kontak, yaitu nomor telepon, alamat, email, dan
link LinkedIn. Section ini dibagi menjadi dua kolom, yaitu kolom kiri yang
berisi nama section dan informasi kontak yang bisa dihubungi dan kolom kanan
yang berisi ilustrasi grafis.
7. Membuat Repository di Github
Membuat repository di github dengan nama Pemrograman
Web B untuk menyimpan file script css, gambar, javascript, dan file html. File
tersebut dipush menggunakan Github Desktop. Supaya semua file ini dapat dideploy,
tidak perlu membuat file readme.
8. Melakukan Deployment Repository Github
Untuk melakukan deployment pada repository, menuju ke
Settings kemudian memilih Github Pages. Kemudian, mengubah source menjadi main
dan pathnya adalah root. Setelah di save, menunggu beberapa menit lalu link
domain tersedia.
9. Website CV dapat diakses melalui https://erzajanitra.github.io/Pemrograman-Web-B/
Dokumentasi Source Code :
Link Repository Github :
https://github.com/erzajanitra/Pemrograman-Web-B
HTML Script :
CSS Script :
Comments
Post a Comment