Cara membuat portofolio page sederhana – haiii semuanya!!, pada artikel kali ini saya akan kasih tutorial membuat portofolio page yang sederhana menggunakan bahasa pemrograman HTML dan CSS.
tapi sebelum itu ada yang tau apa itu portofolio page?? jika belum tau kita bahas terlebih dahulu apa itu portofolio page,, sebelum kita menuju ke tutorial membuatnya.
Pengertian Portofolio Page
portofolio page adalah sebuah halaman untuk menunjukan skill kemampuan atau sebuah projek yang kita miliki dalam bentuk page (Halaman).
tujuannya jika kamu ingin melamar sebuah pekerjaan, perusahaan bisa melihat kemampuan dan skill kamu agar bisa menjadi bahan perimbangan.
atau bagi kamu yang merupakan freelance portofolio page ini menjadi hal yang penting untuk bisa menarik client dari luar.
Cara Membuat Portofolio Page
setelah mengetahui apa itu portofolio page, sekarang langsung saja kita buat dengan bahasa pemrograman dasar html dan css. langsung saja buka text editor kamu !!
disini saya memakai visual studio code untuk membuatnya kamu bisa pakai text editor yang biasa kamu gunakan untuk melakukan coding.
Buat File Index.html
Jika sudah membuat file dan di beri nama “index.html” dan kemudian copy script kode dibawah ini dan tempelkan
<html>
<head>
<title>Sulistio</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Sulistio Profile Biodata Resume And Curriculum Vitae" />
<meta name="keywords" content="creative,sulistio, sulistio xyz, sulistio profile, sulistio biodata, sulistio xyz, my sulistio, sulistio cv, designer, online cv, online resume, powerful portfolio, professional, professional resume, responsive, resume, vcard " />
<meta name="developer" content="Sulistio">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- FAV AND ICONS -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="shortcut icon" sizes="72x72" href="assets/images/favicon.ico">
<link rel="shortcut icon" sizes="114x114" href="assets/images/favicon.ico">
<style>
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
*{
margin: 0px;
padding: 0px;
}
body{
font-family: 'Exo', sans-serif;
background-color: rgb(0, 0, 0);
}
.hello{
font-size: 25px;
color: rgb(76, 116, 202);
background-color: #ffffff;
font-size: 14px;
line-height: 24px;
letter-spacing: 1px;
font-weight: bold;
padding: 10px 30px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 0px;
}
h5{
font-size: 20px;
color: rgb(255, 255, 255);
}
h3{
font-size: 40px;
color: rgb(255, 255, 255);
}
h1{
font-size: 35px;
color: rgb(255, 255, 255);
}
.profil {
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid white;
}
ul {
padding:0;
list-style: none;
}
.footer-social-icons {
width: 350px;
display:block;
margin: 0 auto;
}
.social-icon {
color: #fff;
}
ul.social-icons {
margin-top: 10px;
}
.social-icons li {
vertical-align: top;
display: inline;
height: 100px;
}
.social-icons a {
color: #fff;
text-decoration: none;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-instagram {
padding:10px 12px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
}
.fa-instagram:hover {
background-color: #8a3ab9;
}
.fa-wordpress {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
}
.fa-wordpress:hover {
background-color: #21759b;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-github {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #000000;
}
.fa-github:hover {
background-color: #5a32a3;
}
@import "susy";
@import "compass/reset";
.stars, .twinkling, .clouds {
position:absolute;
display:block;
top:0; bottom:0;
left:0; right:0;
width:100%; height:100%;
}
.stars {
z-index: 0;
background: #000 url('https://image.ibb.co/mjnygo/stars.png') repeat top center;
}
.twinkling{
z-index: 1;
background:transparent url('https://image.ibb.co/ir1DE8/twinkling.png') repeat top center;
animation: move-twink-back 200s linear infinite;
}
@keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
</style>
<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#000000' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#000000' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#000000' name='apple-mobile-web-app-status-bar-style'/>
</head>
<body>
<center>
<div class="stars">
<div class="twinkling">
<br>
<br>
<br>
<img class="profil" src="https://my.sulistio.xyz/assets/images/hero.png" alt="swarnab">
<br>
<br>
<span class="hello">Hello i'm</span>
<br>
<br>
<h3> SULISTIO </h3>
<h5>Computer And Network Engineering</h5>
<div class="footer-social-icons">
<ul class="social-icons">
<li><a href="https://facebook.com/sulistioxyz" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="https://instagram.com/sulistioxyz" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a href="https://sulistio.xyz" class="social-icon"> <i class="fa fa-wordpress"></i></a></li>
<li><a href="https://www.youtube.com/channel/UC6wwwIkm-YrvFODGt766HYw" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
<li><a href="https://www.linkedin.com/in/sulistioxyz/" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a href="https://github.com/sulistioxyz" class="social-icon"> <i class="fa fa-github"></i></a></li>
</ul>
</div>
</div>
</div>
</center>
</body>
</html>
setelah itu save & view
hasil dari codingan :
setelah membuat dasar dari tampilannya kamu bisa menambahkan bagian keterampilan skill yang kamu miliki, sengaja saya membuatnya secara sederhana dan mudah untuk di re-edit.
Kesimpulan
perlu di ingat script ini hanya untuk tampilannya saja dan kamu perlu menambahkan beberapa kode untuk menunjukan skill dan kemampuan yang kamu miliki.
mungkin next tutorial kita akan buat untuk bagian skill dan keterampilannya, sekian cara membuat portofolio page serehana semoga dapat bermanfaat!!
mantap tutorialnya, web portfolio emang penting bgt buat menunjang profesionalisme.
Ditunggu lanjutannya.
siap ditunggu 🙂
Thank you!!, Ditunggu lanjutannya..