Pembuatan Website CV

Pembuatan Website CV

on September 07, 2021

Website CV saya ini dibuat dengan menggunakan HTML dan CSS yang baru-baru ini saya pelajari. Berikut adalah langkah-langkah yang saya gunakan dalam pembuatan Website tersebut.

1. Konsep
      Saya awal melakukan pemikiran tentang layout website. Lalu, saya akan mengisi Blog dengan Latar Belakang saya, akademik saya, skill, dan programming language yang akan saya sudah pelajari.

2. Coding

     Lalu saya lanjutkan dengan melakukan pengodingan. Berikut adalah script HTML saya:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
    <head>
        <title>Rahadian Adjie Mahesa</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header id="main-header">
            <div class="container">
                <h1>Website Adjie</h1>
            </div>
        </header>

        <nav id="navbar">
            <div class="container">
                <ul>
                    <li>
                        <a href="../myPorto/index.html" target="_blank">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="https://www.instagram.com/adjiemahesa" target="_blank">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>

        <section id="showcase">
            <div class="container">
                <h1>Rahadian Adjie Mahesa</h1>
            </div>
        </section>

        <div class="container">
            <section id="about">
                <h1>Selamat Datang!</h1>
                <p>Perkenalkan nama saya <strong>Rahadian Adjie Mahesa</strong> atau biasa dipanggil
                    <strong>Adjie</strong>. Saya berusia 21 Tahun dan adalah seorang Mahasiswa angkatan
                    2019 di Institut Teknologi Sepuluh Nopember pada jurusan Teknik Informatika.
                    Saya sangat interested dalam mengembangkan skill programming saya. Website ini
                    dibuat dengan pengalaman baru saya dalam belajar HTML dan CSS.
                </p>
            </section>

            <aside id="sidebar">
                <a href="img/IMG_4766.jpg">
                    <img src="img/IMG_4766.jpg" alt="Rahadian Adjie Mahesa">
                </a>
            </aside>

            <section id="education">
                <h3>
                    Academic Background :
                </h3>
                    <ul>
                        <li>
                            Institut Teknologi Sepuluh Nopember (ITS) [2019-Sekarang]
                        </li>
                        <li>
                            SMAN 70 Jakarta [2015-2018]
                        </li>
                        <li>
                            SMP Islam Al-Azhar 1 Jakarta [2012-2015]
                        </li>
                        <li>
                            SD Islam Al-Azhar 1 Jakarta [2006-2012]
                        </li>
                    </ul>
            </section>

            <div class="box-seperate">
                <h2>Skills</h2>
            </div>

            <div class="skill">
               <h4>Good Communication Skills</h4>
            </div>
            <div class="skill">
                <h4>Keen to Learn New Things</h4>
            </div>
            <div class="skill">
                <h4>Initiative and Adaptive</h4>
            </div>
            <div class="skill">
                <h4>Ability to Work As a Team</h4>
            </div>
            <div class="skill">
                <h4>Good English Skills</h4>
            </div>
        </div>

        <div class="container">
            <div class="box-seperate">
                <h2>Programming Language</h2>
            </div>

            <div class="list">
                <h4>C</h4>
            </div>
            <div class="list">
                <h4>C++</h4>
            </div>
            <div class="list">
                <h4>Java</h4>
            </div>
            <div class="list">
                <h4>HTML</h4>
            </div>
            <div class="list">
                <h4>SQL</h4>
            </div>
        </div>

        <footer id="main-footer">
            <p>Copyright © 2021 Rahadian Adjie Mahesa</p>
        </footer>
    </body>
</html>

Lalu saya buatkan script CSS untuk melakukan perapihan penampilan seperti berikut:
body{
    background-color: #f4f4f4;
    color: #555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}

img{
    max-width: 80%;
    height: auto;
}

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

.box-seperate{
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

.skill{
    float: left;
    width: 20%;
    border: 1px;
    padding: 10px;
    box-sizing: border-box;
}

.skill h4{
    text-align: center;
}

.list{
    float: left;
    width: 20%;
    border: 1px solid #555;
    padding: 10px;
    box-sizing: border-box;
}

.list h4{
    text-align: center;
}

#education{
    float: left;
    width: 70%;
    padding: 0 30px;
    box-sizing: border-box;
}

#main-header{
    background-color:#fff;
    color: #555;
    font-size: 20px;
}

#navbar{
    background-color:dimgrey;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
}

#navbar ul{
    padding: 0;
    list-style: none;
}

#navbar li{
    display: inline;
}

#navbar a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding-right: 15px;
}

#showcase{
    background-image: url('../img/12-Light.jpg');
    min-height: 300px;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}

#showcase h1{
    color: #fff;
    font-size: 50px;
    line-height: 1.6em;
    padding-top: 30px;
}

#about{
    float: left;
    width: 70%;
    padding: 0 30px;
    box-sizing: border-box;
}

#sidebar {
    float: right;
    width: 30%;
    padding-top: 20px;
}

#main-footer {
    background: dimgrey;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    min-height: 60px;
}

3. Deploy

   Setelah terbuat, saya deploy menggunakan vercel. Disini saya pertama-tama membuat repo pada github lalu saya import ke web vercel. Web akan live pada cv-adjiemahesa.vercel.app

Comments