Membuat resume atau CV dengan bootstrap 4 bagian desain karir dan pendidikan

Gambar tampilan desain karir dan pendidikan tampilan desktop.

Untuk desain CV dengan bootstrap 4 bagian karir dan pendidikan akan ditempatkan pada class badan. Saya akan menggunakan class row serta class col-md-* untuk membuat baris dan kolom, masing-masing bagian menggunakan kelas tersebut. Untuk lebih jelasnya di bawah ini adalah kerangka kode html class badan yang akan berisi desain bagian karir, bagian pendidikan, bagian keahlian, bagian kontak serta bagian ornamen untuk memperindah halaman.

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Dengan melihat kerangka kode html tersebut, saya akan menampilkan per baris/row pada layar mobile (kurang dari 768px). Sedangkan pada resolusi di atas 768px, resume atau CV akan terlihat satu halaman penuh.

Untuk layar mobile digunakan tombol menu untuk pindah ke bagian lain.

Desain resume atau CV bagian karir.

Pada bagian karir saya menggunakan class row untuk membuat baris dan class col-md-12 untuk membuat kolom. Sedangkan di dalam kolom tersebut diisi oleh class card-deck. Fungsi class card-deck untuk membuat group dari class card. Kemudian ditambah 2 class card untuk membuat 2 kolom card.

Untuk lebih jelasnya di bawah ini adalah kode dan tangkapan layarnya.

<i class="fas fa-suitcase ml-2 mr-2"></i>Karir

</h2>

<div class="card-header bg-primary">Tempat Kerja</div>

<h5 class="card-title">Posisi/Jabatan</h5>

<p class="card-text">Tanggung jawab pekerjaan atau prestasi kerja selama bekerja.</p>

<p class="card-text"><small class="text-muted">lama bekerja mis. 2010-2017</small></p>

</div>

<div class="card-header bg-primary">Tempat Kerja</div>

<h5 class="card-title">Posisi/Jabatan</h5>

<p class="card-text">Tanggung jawab pekerjaan atau prestasi kerja selama bekerja.</p>

<p class="card-text"><small class="text-muted">lama bekerja mis. 2010-2017</small></p>

</div>

<div class="card-header bg-primary">Tempat Kerja</div>

<h5 class="card-title">Posisi/Jabatan</h5>

<p class="card-text">Tanggung jawab pekerjaan atau prestasi kerja selama bekerja.</p>

<p class="card-text"><small class="text-muted">lama bekerja mis. 2010-2017</small></p>

</div>

</div>

<div class="card-header bg-primary">Tempat Kerja</div>

<h5 class="card-title">Posisi/Jabatan</h5>

<p class="card-text">Tanggung jawab pekerjaan atau prestasi kerja selama bekerja.</p>

<p class="card-text"><small class="text-muted">lama bekerja mis. 2010-2017</small></p>

</div>

</div>

Tangkapan layar pada tampilan desktop

Tangkapan layar pada tampilan mobile

Anda bisa menambah dan mengurangi card sesuai dengan jumlah pengalaman kerja. Tinggal menghapus blok kode atau menambahkan blok kode. Semakin banyak class card, kolom juga akan bertambah.

<div class="card-header bg-primary">Tempat Kerja</div>

<h5 class="card-title">Posisi/Jabatan</h5>

<p class="card-text">Tanggung jawab pekerjaan atau prestasi kerja selama bekerja.</p>

<p class="card-text"><small class="text-muted">lama bekerja mis. 2010-2017</small></p>

</div>

</div>

<div class="card-header bg-primary">Tempat Kerja</div>

<h5 class="card-title">Posisi/Jabatan</h5>

<p class="card-text">Tanggung jawab pekerjaan atau prestasi kerja selama bekerja.</p>

<p class="card-text"><small class="text-muted">lama bekerja mis. 2010-2017</small></p>

</div>

</div>

Desain resume atau CV bagian ornamen dua.

Pada bagian ini hanya untuk mempercantik tampilan saja. Ornamen yang dibuat hanya garis dan bulatan pada ujung garis. Ornamendua juga ditempatkan pada class row dan class col-md-12. Disetiap akhir bagian akan ditampilkan hiasan ini pada layar desktop, sedangkan pada layar mobile ornamen tidak ditampilkan.

Berikut kode ornamendua.

</div>

</div>

</div>

Tampilan ornamen yang dimaksud adalah sebagai berikut

untuk mendapatkan tampilan garis dan bulatan tersebut digunakan css.

Desain resume atau CV bagian pendidikan.

Desain pada bagian pendidikan memanfaatkan class pada bootstrap yaitu list-group dan list-group-horizontal dan masing-masing list item diberi class flex-fill yang bertujuan untuk menyamakan lebar kolom.

Berikut kode pada bagian pendidikan.

<i class="fas fa-graduation-cap ml-2 mr-2"></i>Pendidikan

</h2>

<p class="m-0">SD Negeri 1 Jogja </p>

<p class="badge badge-pill badge-primary m-0"><small>Tahun 1990 - 1996</small></p>

</li>

<p class="m-0">SMP Negeri 1 Jogja</p>

<p class="badge badge-pill badge-primary m-0"><small>Tahun 1996 - 1999</small></p>

</li>

<p class="m-0">SMA Negeri 1 Jogja</p>

<p class="badge badge-pill badge-primary m-0"><small>Tahun 1999 - 2002</small></p>

</li>

<h4>Sarjana</h4>

<p class="m-0">Universitas Jogja</p>

<p class="badge badge-pill badge-primary m-0"><small>Tahun 2003 - 2007</small></p>

</li>

</ul>

</div>

Tampilan pada layar desktop

Tampilan pada layar mobile

Jika anda ingin menambah atau mengurangi item pendidikan bisa dengan menghapus atau mengetik blok kode berikut

<h4>Sarjana</h4>

<p class="m-0">Universitas Jogja</p>

<p class="badge badge-pill badge-primary m-0"><small>Tahun 2003 - 2007</small></p>

</li>

CSS bagian karir, pendidikan dan ornamen dua.

CSS bagian karir dan pendidikan ditempatkan pada @media(max-width:767.98px)

.karir{

height:100vh;

display:none;

}

.pendidikan{

height:100vh;

display:none;

}

CSS bagian ornamen dua ditempatkan pada @media(min-width:768px)

.bulkir{

position:relative;

height: 15px;

width: 15px;

border-style:solid;

border-width:7px;

border-radius:180px;

border-color:#20ace6;

top:9px;

left:-2px;

}

.garis{

height:2px;

background-color:#20ace6;

}

.bulkan{

position:absolute;

height: 15px;

width: 15px;

border-style:solid;

border-width:7px;

border-radius:180px;

border-color:#20ace6;

top:9px;

right:9px;

}

Jquery untuk tombol menu.

Tombol menu hanya akan tampil pada layar mobile, sedangkan pada layar desktop tidak tampil. Pada layar mobile ditampilkan per bagian dan untuk berpindah bagian digunakan tombol pada menu. Oleh karena itu diperlukan javascript untuk mengaturnya. Bootstrap juga memerlukan javascript untuk bagian-bagian tertentu. Bootstrap menggunakan library javascript yaitu jquery. Jquery akan saya gunakan untuk berpindah bagian, alurnya adalah ketika tombol beranda di tekan, bagian header yang tampil sedangkan bagian lain disembunyikan. Hal itu berlaku untuk bagian lainnya.

Tempatkan script berikut di atas tag </body>

$("button.bhome").click(function(){

$("div.karir").hide();

$("div.pendidikan").hide();

$("div.keahlian").hide();

$("div.kontak").hide();

$("header.kepala").fadeIn();

});

$("button.bkarir").click(function(){

$("header.kepala").hide();

$("div.pendidikan").hide();

$("div.keahlian").hide();

$("div.kontak").hide();

$("div.karir").fadeIn();

});

$("button.bdidik").click(function(){

$("header.kepala").hide();

$("div.pendidikan").fadeIn();

$("div.keahlian").hide();

$("div.kontak").hide();

$("div.karir").hide();

});

$("button.bahli").click(function(){

$("header.kepala").hide();

$("div.pendidikan").hide();

$("div.keahlian").fadeIn();

$("div.kontak").hide();

$("div.karir").hide();

});

$("button.bkontak").click(function(){

$("header.kepala").hide();

$("div.pendidikan").hide();

$("div.keahlian").hide();

$("div.kontak").fadeIn();

$("div.karir").hide();

});

</script>

Pembuatan resume atau CV dengan bootstrap 4 sudah menyelesaikan bagian karir dan pendidikan. Semoga bermanfaat.

Untuk indonesia web