Membuat resume atau CV dengan bootstrap 4 desain bagian keahlian

Untuk membuat resume atau CV desain bagian keahlian dengan bootstrap 4, saya memanfaatkan class media dan progress-bar. Class media bisa digunakan untuk menaruh gambar atau ikon dan teks atau komponen lain seperti progress bar. Class media saya masukkan ke dalam class col agar lebar kolomnya menyesuaikan secara otomatis. Untuk lebih jelasnya berikut kode untuk bagian keahlian.

 <div class="row keahlian mt-2 mb-3">
        <div class="col-md-12">
        <h2 class=" ml-3 text-primary">
          <i class="fas fa-toolbox ml-2 mr-2"></i>Keahlian
        </h2>
        </div>


        <div class="col">
          <div class="media">
            <p class="align-self-center text-center mr-3 mt-0 mb-0"><i class="fas fa-globe fa-2x"></i> <br><span>Website</span></p>
            <div class="media-body">
              <p class="m-0 text-muted">HTML</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80</div>
              </div>

              <p class="m-0 text-muted">CSS</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75</div>
              </div>

              <p class="m-0 text-muted">Jquery</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60</div>
              </div>

              <p class="m-0 text-muted">Bootstrap</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">75</div>
              </div>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="media">
            <p class="align-self-center text-center mr-3 mt-0 mb-0"><i class="fas fa-paint-brush fa-2x"></i> <br><span>CMS dan Grafis</span></p>
            <div class="media-body">
              <p class="m-0 text-muted">inkscape</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80</div>
              </div>

              <p class="m-0 text-muted">Gimp</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75</div>
              </div>

              <p class="m-0 text-muted">Wordpress</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60</div>
              </div>

              <p class="m-0 text-muted">Blogger</p>
              <div class="progress mb-2">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">75</div>
              </div>
            </div>
          </div>
        </div>

      </div>


Anda bisa menambah atau mengurangi dan mengelompokkan keahlian berdasarkan jenis dengan membuat atau menghapus class media, yang dimasukkan dalam class col ataupun tidak. Hal itu tergantung jumlah dan lebar kolom yang diinginkan.

Tampilan bagian keahlian dalam layar dekstop.
Gambar tampilan desktop, cv bagian keahlian

Tampilan bagian keahlian dalam layar mobile.
gambar tampilan mobile, cv bagian keahlian

Bagaimana mudah bukan untuk membuat resume atau CV dengan bootstrap 4. Untuk membuat CV bisa menggunaan html dan css dengan menggunakan bantuan frontend framework seperti bootstrap, materializecss dan yang lain. Nantikan bagian akhir dari postingan ini yaitu bagian kontak serta footer. Terima kasih semoga bermanfaat dan berguna

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara membuat resume atau cv dengan bootstrap 4 bagian pertama

Gambar
Gambar tampilan CV  atau resume dengan bootstrap. Lihat demo CV Resume atau cv bisa ditampilkan dalam bentuk digital yaitu halaman web. Tidak melulu dalam bentuk print out kertas. Dalam pembuatan resume atau cv pada tulisan ini digunakan bantuan framework library html css dan javascript yaitu bootstrap 4. Dalam bootstrap kita bisa menggunakan class yang sudah disediakan. Bootstrap populer karena mudah penggunaannya serta tampilan yang mendukung versi mobile atau responsive. Disamping hal tersebut bootstrap tampil baik dalam berbagai browser. Penulis menggunakan handphone android untuk pembuatan resume ini. Alat-alat yang digunakan membuat cv adalah : Icode-go sebagai kode editor. Chrome sebagai browser. Bootstrap sebagai framework library html css dan javascript. Jquery yang merupakan library javascript diperlukan bootstrap untuk class tertentu.  Fontawesome untuk menambahkan ikon. X-plore File Manager (opsional) untuk mengelola file dan membuka file html deng...
Baca selengkapnya

Membuat resume atau CV dengan bootstrap 4 bagian kontak dan footer

Gambar
Tiba di bagian akhir pembuatan CV menggunakan bootstrap 4, yaitu pembuatan bagian kontak dan footer. Untuk konsep desain bagian kontak sama dengan konsep desain bagian pendidikan. Kesamaannya adalah menggunakan class list-group dan list-group-horizontal. Lebih jelas bisa dilihat dari kode di bawah ini.   <div class="row mt-2 kontak mb-4">         <h2 class="ml-4 text-primary">           <i class="fas fa-inbox ml-2 mr-2"></i>Kontak         </h2>         <div class="col-md-12">           <ul class="list-group list-group-horizontal-md border-left-0 border-right-0">             <li class="list-group-item flex-fill border-left-0 border-right-0">               <p><i class="fas fa-mobile-alt ml-2 mr-2"></i>085-xxx-xxx-x...
Baca selengkapnya

CV atau daftar riwayat hidup versi web dengan bootstrap 4 "Biru utama"

Gambar
Pada kesempatan ini, saya ingin membagikan CV atau daftar riwayat hidup berbentuk web secara gratis. CV ini dibuat melalui html dan css dengan menggunakan frontend framework bootstrap 4 saya beri nama "Biru utama", karena memang dari segi warna didominasi oleh warna biru. Desain dari CV tampil baik di layar desktop maupun mobile atau responsive. Untuk layar desktop terbagi dua kolom, kolom kiri berisi data singkat sedang kolom kanan terdiri dari uraian karir, pendidikan, keahlian dan kontak. Bagian kanan pada tampilan desktop bisa di scroll apabila panjang layar tak bisa menampung data pada CV. Pada tampilan mobile hanya ada satu kolom dari atas ke bawah. Berikut adalah tampilan CV di layar desktop maupun mobile vertikal atau horisontal. Tampilan pada layar desktop : Gambar CV "Biru Utama" tampil di layar desktop vertikal Gambar tampilan CV "Biru Utama" di layar desktop horisontal Tampilan pada layar mobile : Gamba...
Baca selengkapnya