Membuat Curriculum Vitae yang Menarik di Blog
Gimana .... menarik bukan? Mau tau bagaimana cara buatnya? Yuk simak caranya berikut ini!
Untuk membuat CV di blog caranya sangat mudah, ibu/bapak tinggal menggunakan template yang sudah ada dan selanjutnya tinggal edit sesuai dengan kebutuhan ibu/bapak. Langkah membuatnya yaitu dengan membuka postingan baru di blogger, selanjutnya rubah ke mode html kemudian pastekan template CV di bawah ini. Berikutnya ibu/bapak tinggal edit sesuai riwayat hidupnya, tara..... curriculum vitae pun jadi. Mudah bukan.
Berikut saya bagikan template nya
<style>
:root {
--color-gray-light-1: #f8f8f8;
--color-gray-light-2: #e9e9e9;
--color-gray-light-3: #dedede;
--color-gray-dark-1: #545454;
--color-gray-dark-2: #737373;
--color-gray-dark-3: #9a9a9a;
--color-blue-dark-1: #00387f;
--color-tiffany: #00a6a6;
--profile-theme: #2d2d2d;
--timeline-circle-theme: #14253e;
--pgbar-length: 100%;
--MATH-PI: 3.1415px;
--percent: 100;
}
html {
font-size: 100%;
font-family: 'PT Sans', sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 3rem 1rem;
min-height: 100vh;
background-color: var(--color-gray-light-3);
}
.wrapper {
margin: 0 auto;
max-width: 70rem;
background-color: var(--color-gray-light-2);
display: flex;
box-shadow: 0px 0px 15px 4px #b3b3b3;
}
.intro {
flex: 0 0 250px;
background-color: var(--color-gray-light-1);
box-shadow: 5px 0px 15px 0px #b3b3b3;
z-index: 5;
}
.profile {
position: relative;
background-color: var(--profile-theme);
padding: 2rem 1rem;
margin-bottom: 50px;
text-align: center;
user-select: none;
}
.profile::after {
content: " ";
position: absolute;
left: 0;
bottom: -15px;
width: 100%;
height: 30px;
background-color: var(--profile-theme);
transform: skewY(-5deg);
}
.photo img {
width: 80%;
border-radius: 50%;
}
.bio .name {
font-size: 1.5rem;
text-align: center;
color: var(--color-gray-light-1);
margin: 0;
margin-top: 1rem;
}
.bio .profession {
font-size: 1rem;
text-align: center;
color: var(--color-gray-light-1);
margin: 0;
}
.intro-section {
padding: 0 1rem;
color: var(--color-gray-dark-1);
}
.intro-section .title {
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.about .paragraph {
text-align: justify;
}
.info-section {
margin: 1rem 0;
}
.info-section span {
position: relative;
transition: all 0.3s;
}
.info-section i {
color: var(--profile-theme);
width: 20px;
height: 20px;
}
.link a {
text-decoration: none;
color: inherit;
}
.link span::after {
position: absolute;
content: '';
left: 50%;
bottom: -3px;
width: 0;
height: 2px;
background-color: var(--profile-theme);
transition: width 0.3s;
/*transition-timing-function: cubic-bezier(.64,.51,.16,.86);*/
transition-timing-function: cubic-bezier(.92,.57,.33,1.02);
transform: translate(-50%, 0);
}
.link span:hover {
color: var(--profile-theme);
}
.link span:hover::after {
width: 100%;
}
/* Detail section overall setting*/
.detail {
flex: 1 0 0;
background-color: white;
padding: 2rem;
}
.detail:hover > .detail-section:not(:hover) {
opacity: 0.3;
}
.detail-section {
transition: all 0.3s;
}
.detail-section:not(:last-of-type) {
padding-bottom: 1rem;
}
.detail-title {
display: flex;
align-items: center;
}
.detail-section > .detail-content {
padding: 1.5rem;
padding-left: 2rem;
user-select: none;
}
.detail-section.edu > .detail-content {
padding-left: calc(1.5rem + 10px);
}
.title-icon + span {
font-size: 1.5rem;
transition: all 0.3s;
}
.title-icon {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 1rem;
margin-right: 1rem;
width: 2.5rem;
height: 2.5rem;
background-color: var(--profile-theme);
border-radius: 50%;
transition: all 0.3s;
}
.title-icon i {
color: white;
line-height: 1rem;
font-size: 1rem;
text-align: center;
}
.detail-section:hover .title-icon {
transform: scale(1.5);
margin-right: 1.5rem;
}
.detail-section:hover .title-icon + span {
letter-spacing: 1.5px;
}
/* time line block in education section */
.timeline-block {
position: relative;
padding-left: 30px;
}
.timeline-block:not(:last-of-type) {
margin-bottom: 1rem;
}
.timeline-block h1 {
font-size: 1rem;
margin: 5px 0;
transition: all 0.3s;
}
.timeline-block p {
font-size: 0.8rem;
margin: 5px 0;
}
.timeline-block time {
font-size: 0.8rem;
color: var(--color-gray-dark-2);
}
.timeline-block::before {
position: absolute;
content: '';
width: 15px;
height: 15px;
background-color: white;
border: 3px solid var(--timeline-circle-theme);
border-radius: 50%;
left: -10px;
top: -5px;
}
.timeline-block::after {
position: absolute;
content: '';
width: 3px;
height: 100%;
background-color: var(--timeline-circle-theme);
left: -1px;
top: 13px;
}
.timeline-block:hover h1 {
color: var(--color-tiffany);
}
.timeline-block:hover::before {
animation: circle 1.2s infinite;
}
/* Programming skills section */
.pg-list, .tool-list, .favor-list {
padding: 0;
list-style: none;
}
.pg-list > li {
margin: 1rem 0;
display: flex;
align-items: center;
}
.sb-skeleton {
position: relative;
flex: 1 0 auto;
height: 2px;
background-color: var(--color-gray-dark-3);
}
.pg-list > li > span {
flex: 0 0 150px;
}
.sb-skeleton > .skillbar {
position: absolute;
left: 0;
top: -1px;
width: var(--pgbar-length);
height: 4px;
background-color: var(--profile-theme);
}
.tool-list {
list-style: none;
display: flex;
justify-content: space-between;
}
.tool-list > li {
position: relative;
text-align: center;
flex: 0 0 25%;
}
.tool-list > li > svg {
position: relative;
fill: transparent;
width: 95%;
transform: rotate(-90deg);
}
.tool-list > li > svg > circle {
stroke-width: 1px;
stroke: #cdcdcd;
}
.tool-list > li > svg > circle.cbar {
stroke-width: 3px;
stroke: var(--profile-theme);
stroke-linecap: round;
stroke-dashoffset: 0;
stroke-dasharray: calc(var(--MATH-PI) * 45 * 2);
transition: all 0.8s;
transition-timing-function: cubic-bezier(.64,.51,.16,.86);
}
.tool-list > li:hover > svg > circle.cbar {
stroke-width: 4px;
stroke: var(--color-tiffany);
stroke-dashoffset: calc(var(--MATH-PI) * 45 * 2 * (1 - var(--percent)));
}
.tool-list > li > .tl-name,
.tool-list > li > .tl-exp {
position: absolute;
left: 50%;
color: var(--color-gray-dark-1);
}
.tool-list > li > .tl-name {
top: 50%;
font-size: 1.2rem;
transform: translate(-50%, -50%);
}
.tool-list > li > .tl-exp {
top: calc(50% + 1.4rem);
font-size: 1rem;
transform: translate(-50%, -50%);
}
/* Interests Section */
.outer-frame {
border: 1px solid var(--color-gray-dark-3);
border-radius: 5px;
}
.favor-list {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
}
.favor-list > li {
display: flex;
flex: 1 0 0;
align-items: center;
justify-content: baseline;
flex-direction: column;
color: var(--profile-theme);
padding: 1rem 0;
transition: all 0.3s;
}
.favor-list > li > i {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 40px;
width: 50px;
height: 50px;
}
.favor-list > li:hover {
transform: scale(1.2);
color: var(--color-tiffany);
}
.favor-list > li > span {
letter-spacing: 1px;
}
@keyframes circle {
0% {
box-shadow: 0 0 0 0px rgba(51, 52, 57, 1);
}
100% {
box-shadow: 0 0 0 6px rgba(51, 52, 57, 0);
}
}
@media (max-width: 1024px) {
html {
font-size: 90%;
}
.wrapper {
flex-direction: column;
}
.intro, .detail {
flex: 0 0 100%;
box-shadow: none;
}
.intro-section {
padding: 0 2rem;
}
.profile {
margin-bottom: 1rem;
}
.profile::after {
display: none;
}
.photo img {
width: 100px;
height: 100px;
}
}
@media (max-width: 768px) {
html {
font-size: 80%;
}
.tool-list {
flex-wrap: wrap;
}
.tool-list > li {
flex: 0 0 33.33%;
}
.favor-list > li {
flex: 0 0 33.3333%;
}
}
@media (max-width: 500px) {
html {
font-size: 70%;
}
}
</style>
<center>
<h5>CURRICULUM VITAE</h5>
</center>
<div class="wrapper">
<div class="intro">
<div class="profile">
<div class="photo">
<img height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggxRrDjh1WcRp5n4VlTj2CX08XDGUmCCE5ugRyRVSfQObTGnacdnu9Woec8yHp7x_ZyYUt9OWMnettCAnqVQCNPEPQfweQvC0igHXfR3TBXqgCGbEKF7uy7PRUK57lfhWrioeNhmI5IQp3G36gbKDZTb_N_4p3Jkj0EwXo-euo0Ku96al5dQawUpsU-g/w640-h640/Desain_tanpa_judul__35_-removebg-preview.png" width="640" />
</div>
<div class="bio">
<h1 class="name">Putu Edy Pariawan, S.Pd</h1><br />
<p class="profession">Trainer SAGUSABLOG</p>
</div>
</div>
<div class="intro-section about">
<h1 class="title">Tentang Saya</h1>
<p class="paragraph">
Perkenalkan nama saya Putu Edy Pariawan, lahir di Karangasem, 06 Oktober 1985. Profesi sekarang sebagai Kepala Sekolah di SD Negeri 29 Dangin Puri, Denpasar, Bali. Saya adalah seorang Guru Penggerak. Saya menempuh pendidikan Guru Penggerak pada Angkatan I (13 Oktober 2020 sampai dengan 28 Agustus 2021) dan pada 13 September 2021 dinyatakan lulus dengan hasil Amat Baik. Selain sebagai guru saya juga memiliki aktifitas lainnya yaitu sebagai blogger, youtuber, dan designer.
</p>
</div>
<div class="intro-section contact">
<h1 class="title">Contact</h1>
<div class="info-section">
<i class="fa fa-whatsapp"></i>
<span>(+62)85935012344</span>
</div>
<div class="info-section">
<i class="fa fa-map-marker"></i>
<span>Denpasar, Bali</span>
</div>
<div class="info-section link">
<i class="fa fa-envelope"></i>
<a href="mailto:putuspd60@guru.sd.belajar.id" rel="author" target="_blank">
<span>putuspd60@guru.sd.belajar.id</span>
</a>
</div>
<div class="info-section link">
<i class="fa fa-paper-plane"></i>
<a href="https://t.me/EdyPariawan" rel="author" target="_blank">
<span>Edy Pariawan</span>
</a>
</div>
<div class="info-section link">
<i class="fa fa-facebook"></i>
<a href="https://www.facebook.com/edy.pariawan" rel="author" target="_blank">
<span>Edy Pariawan</span>
</a>
</div>
<div class="info-section link">
<i class="fa fa-youtube"></i>
<a href="https://www.youtube.com/channel/UCYTyaHtnY2_xHG6a6vi7IcA" rel="author" target="_blank">
<span>Ngiring Melajah</span>
</a>
</div>
<div class="info-section link">
<i class="fa fa-link"></i>
<a href="https://www.ngiringmelajah.com/" rel="author" target="_blank">
<span>www.ngiringmelajah.com</span>
</a>
</div>
</div>
</div>
<div class="detail">
<div class="detail-section edu">
<div class="detail-title">
<div class="title-icon">
<i class="fa fa-book"></i>
</div>
<span>Pendidikan</span>
</div>
<div class="detail-content">
<div class="timeline-block">
<h1>SDN 4 Rendang</h1>
<p>Br. Dinas Singerata, Desa Rendang, Kec. Rendang, Kab. Karangasem</p>
<time>1991 - 1997</time>
</div>
<div class="timeline-block">
<h1>SLTPN 1 Rendang</h1>
<p>Desa Rendang, Kec. Rendang, Kab. Karangasem</p>
<time>1997 - 2000</time>
</div>
<div class="timeline-block">
<h1>SMUN 1 Rendang</h1>
<p>Desa Rendang, Kec. Rendang, Kab. Karangasem</p>
<time>2000 - 2003</time>
</div>
<div class="timeline-block">
<h1>Undiksha (Universitas Pendidikan Ganesha)</h1>
<p>S1 Pendidikan Guru Sekolah Dasar</p>
<time>2009 - 2013</time>
</div>
</div>
</div>
<div class="detail-section edu">
<div class="detail-title">
<div class="title-icon">
<i class="fa fa-briefcase"></i>
</div>
<span>Pengalaman Kerja</span>
</div>
<div class="detail-content">
<div class="timeline-block">
<h1>Guru SDN 32 Pemecutan</h1>
<p>Guru Honor - Guru Kelas IV</p>
<time>September 2013 - Februari 2014</time>
</div>
<div class="timeline-block">
<h1>Guru SDN 29 Dangin Puri</h1>
<p>ASN - Guru Kelas VI</p>
<time>Februari 2014 - Sekarang</time>
</div>
<div class="timeline-block">
<h1>Kepala SDN 29 Dangin Puri</h1>
<p>ASN - Kepala Sekolah</p>
<time>Juni 2022 - Sekarang</time>
</div>
</div>
</div>
<div class="detail-section pg-skill">
<div class="detail-title">
<div class="title-icon">
<i class="fa fa-laptop"></i>
</div>
<span>Keterampilan</span>
</div>
<div class="detail-content">
<ul class="pg-list">
<li>
<span>Blogger</span>
<div class="sb-skeleton">
<div class="skillbar" style="--pgbar-length: 80%;"></div>
</div>
</li>
<li>
<span>Editing Video</span>
<div class="sb-skeleton">
<div class="skillbar" style="--pgbar-length: 80%;"></div>
</div>
</li>
<li>
<span>Desain Grafis</span>
<div class="sb-skeleton">
<div class="skillbar" style="--pgbar-length: 80%;"></div>
</div>
</li>
<li>
<span>Multi Media Interaktif</span>
<div class="sb-skeleton">
<div class="skillbar" style="--pgbar-length: 90%;"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="detail-section pg-skill">
<div class="detail-title">
<div class="title-icon">
<i class="fa fa-briefcase"></i>
</div>
<span>Pengalaman Organisasi</span>
</div>
<div class="detail-content">
<ul class="pg-list">
<li>Anggota KKG Kelas VI Kecamatan Denpasar Timur (2015 - 2022)</li>
<li>Pengurus IGI Wilayah Bali Bidang Keanggotaan, Data Informasi, dan Teknologi (2016 - 2021)</li>
<li>Pengurus IGI Wilayah Bali Bidang Keanggotaan, Data Informasi, dan Teknologi (2021 - 2026)</li>
<li>Admin Sisfo IGI Bali (2021 - 2026)</li><li>Wakil Ketua Kelompok Kerja Kepala Sekolah Kecamatan Denpasar Timur (2022 - 2025)</li>
</ul>
</div>
</div>
</div>
</div>
<style>
h5{font-size: 40px;margin-top: -2px;}
h1, h2, h3, h4, h5, h6 {font-weight: bold;
line-height: 1;
}
#header-wrapper {display:none;}
.menu-secondary-container {display:none;}
#rsidebar-wrapper {display:none;}
#comments {display:none;}
.post-title{display:none;}
#footer-widgets {display:none;}
#menu {display:none;}
#main-wrapper {width: 100%;}
#credits {display:none;}
#copyrights{display:none;}
</style>
Belum ada Komentar untuk "Membuat Curriculum Vitae yang Menarik di Blog"
Posting Komentar