PWEB - M Naufal Badruttamam - 5025211240 - Tugas 1

        Nama   : M Naufal Badruttamam
        NRP     : 5025211240
        Kelas   : Pemrograman Web A
        Tahun  : 2022 / 2023

Pada meet kedua, kemi diberikan sebuah tugas untuk membuat CV. Berikut adalah CV sata dalam HTML yang menggunakan style yang simple. CV saya berisi informasi pribadi, pengalaman, dan projek-projek yang pernah saya lakukan. Selain itu, saya juga memperdalam materi saya seputar CSS.

Link Repository Github    : https://github.com/Caknoooo/PWEB_Tugas_1_CV
Link Deployment              : https://cakno-pweb-tugas-1-cv.vercel.app/

Kode :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
      rel="stylesheet"
    />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />

    <!-- Style -->
    <style>
      * {
        font-family: "Barlow", sans-serif;
        margin: 0;
        padding: 0px;
        box-sizing: border-box;
      }
      body {
        background-image: linear-gradient(to right, var(--tw-gradient-stops));
        --tw-gradient-from: #6366f1;
        --tw-gradient-to: rgb(99 102 241 / 0);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
        --tw-gradient-to: rgb(168 85 247 / 0);
        --tw-gradient-stops: var(--tw-gradient-from), #a855f7,
          var(--tw-gradient-to);
        --tw-gradient-to: #ec4899;
      }
      .container {
        margin: auto;
        display: grid;
        grid-template-columns: 0.33fr 1fr;
        width: 240mm;
        height: 297mm;
        overflow: auto;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
      }

      /* Flex left */
      .container .card-one {
        padding: 40px 20px;
        padding-left: 35px;
        background-color: #d1d1d1;
        width: 100%;
        color: #313131;
      }
      .container .card-one .profile {
        display: inline-flex;
        margin-bottom: 5px;
        margin-left: -15=px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        border: 4px solid #2c2b29;
        background-image: url("./image/Caknoo.jpeg");
        background-position: center-top;
        background-size: 90%;
      }
      .container .card-one .contact-box {
        margin-top: 15px;
      }
      .container .card-one .contact-box > * {
        width: 100%;
        margin-top: 12px;
        display: grid;
        grid-template-columns: 0.28fr 1fr;
        align-items: center;
      }
      .container .card-one .contact-box > * .text {
        display: inline-flex;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        word-break: break-all;
      }
      .container .card-one .personal-box {
        margin-top: 35px;
      }
      .container .card-one .personal-box .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #313131;
        border-radius: 50%;
        margin-left: 4px;
      }
      .container .card-one .personal-box .dot.active {
        background-color: #b89258;
      }
      .container .card-one .hobbies-box {
        margin-top: 35px;
      }
      .container .card-one .hobbies-box .logo {
        margin: 10px 0px;
        display: grid;
        grid-template: 1fr 1fr/1fr 1fr;
        font-size: 2.8em;
        grid-row-gap: 15px;
      }

      /* Flex Right */
      .container .card-two {
        background-color: #173c62;
        padding: 40px 20px;
        padding-right: 75px;
        color: #b5b5b4;
      }
      .container .card-two .head-title {
        font-size: 2.2em;
        color: #b89258;
        font-weight: 400;
      }
      .container .card-two .box {
        display: inline-block;
        padding: 2px 70px 2px 20px;
        margin-left: -20px;
        margin-top: 35px;
        background-color: #b89258;
        color: #2c2b29;
      }
      .container .card-two .group-1 .desc {
        margin-top: 15px;
        line-height: 1.5;
        font-size: large;
      }
      .container .card-two .group-2 .desc {
        margin-top: 15px;
        margin-left: 18px;
      }
      .container .card-two .group-2 .desc ul {
        position: relative;
        margin-top: 20px;
        margin-left: 5px;
      }
      .container .card-two .group-2 .desc ul::before {
        content: "";
        position: absolute;
        top: 12px;
        left: -22px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #b89258;
      }
      .container .card-two .group-2 .desc ul li {
        list-style-type: none;
        position: relative;
      }
      .container .card-two .group-2 .desc ul li::before {
        content: "";
        position: absolute;
        top: 12px;
        left: -18px;
        height: 60px;
        border-left: 2px solid #b89258;
      }
      .container .card-two .group-2 .desc ul:last-of-type li::before {
        content: none;
      }
      .container .card-two .group-2 .desc ul li div:last-of-type {
        color: #b89258;
        font-weight: bold;
      }
      .container .card-two .group-3 .desc {
        margin-top: 15px;
        margin-left: 20px;
      }
      .container .card-two .group-3 .desc ul {
        position: relative;
        margin-top: 20px;
        margin-left: 5px;
      }
      .container .card-two .group-3 .desc ul::before {
        content: "";
        position: absolute;
        top: 30px;
        left: -22px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #b89258;
      }
      .container .card-two .group-3 .desc ul li {
        list-style-type: none;
        position: relative;
      }
      .container .card-two .group-3 ul li::before {
        content: "";
        position: absolute;
        top: 30px;
        left: -18px;
        height: 100px;
        border-left: 2px solid #b89258;
      }
      .container .card-two .group-3 ul li div:nth-child(2) {
        color: #b89258;
        font-weight: bold;
      }
      .container .card-two .group-3 ul:last-of-type li::before {
        content: none;
      }
      .bold {
        font-weight: bold;
      }
      .semi-bold {
        font-weight: 600;
      }
      @media print {
      }
    </style>
    <title>Curriculum Vitae - Cakno</title>
  </head>
  <body>
    <div class="container">
      <!-- Card one -->
      <div class="card-one">
        <div class="profile"></div>
        <!-- Contact -->
        <div class="contact-box">
          <h2>Contact</h2>
          <div class="">
            <i class="fas fa-phone-alt"></i>
            <div class="text">(+62)895378107054</div>
          </div>
          <br />
          <div>
            <i class="fas fa-home"> </i>
            <div class="text">Surabaya, Indonesia</div>
          </div>
          <br />
          <div class="">
            <i class="fa-brands fa-github"></i>
            <div class="text">Caknoooo</div>
          </div>
          <br />
          <div class="">
            <i class="fa-brands fa-linkedin"></i>
            <div class="text">M Naufal Badruttamam</div>
          </div>
          <br />
          <div class="">
            <i class="fas fa-envelope"> </i>
            <div class="text">cakncomel@gmail.com</div>
          </div>
        </div>

        <!-- Personal box -->
        <div class="personal-box">
          <h2>Personal Skills</h2>
          <div>
            <p>C / C++</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
            </div>
          </div>
          <div>
            <p>Python</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
          <div>
            <p>Java</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
          <div>
            <p>Frontend Developer</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
          <div>
            <p>Backend Developer</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
          <div>
            <p>Artificial Intelligence</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
          <div>
            <p>Data Science</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
          <div>
            <p>QA Engineering</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
          <div>
            <p>Editing</p>
            <div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>

          <!-- Hobbies -->
          <div class="hobbies-box">
            <h2>Hobbies</h2>
            <div class="logo">
              <div>
                <i class="fas fa-gamepad"></i>
              </div>
              <div>
                <i class="fas fa-tv"></i>
              </div>
              <div>
                <i class="fas fa-table"></i>
              </div>
              <div>
                <i class="fas fa-lightbulb"></i>
              </div>
              <div>
                <i class="fas fa-life-ring"></i>
              </div>
              <div>
                <i class="fas fa-luggage-cart"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Card two -->
      <div class="card-two">
        <div class="head-title">
          <h1>M Naufal Badruttamam</h1>
        </div>
        <div>
          <h2>Software Engineering</h2>
        </div>
        <!-- About Me -->
        <div class="group-1">
          <div class="box">
            <h2>About me</h2>
          </div>
          <div class="desc">
            Hello everyone! My Name is M Naufal Badruttamam, I was born in
            Surabaya on March 15, 2023. Currently, I studying at Sepuluh
            Nopember Intitute of Technology. I learned programming in early
            September 2021. I'am Junior Programming, especially in the field
            Software Engineering, QA Engineer, Artificial Intelligence, and
            Specials Backend Developer
          </div>
        </div>

        <!-- Education-->
        <div class="group-2">
          <div class="box">
            <h2>Education</h2>
          </div>
          <div class="desc">
            <ul>
              <li>
                <div>
                  2016 - 2018 | <span class="bold">SMPN 19 Surabaya</span>
                </div>
                <div>Student</div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  2018 - 2021 | <span class="bold">SMAN 20 Surabaya</span>
                </div>
                <div>Student</div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  2021 - Current |
                  <span class="bold">Institut Teknologi Sepuluh Nopember</span>
                </div>
                <div>Bachelor of Computer Science</div>
              </li>
            </ul>
          </div>
        </div>

        <!-- Experience -->
        <div class="group-3">
          <div class="box">
            <h2>Work Experience</h2>
          </div>
          <div class="desc">
            <ul>
              <li>
                <div>
                  2021 - 2022 |
                  <span class="semi-bold">Question Division</span> |
                  <span class="bold">Schematics ITS Surabaya</span>
                </div>
                <div>Staff</div>
                <div>
                  Make National-based logic questions with precise and clear
                  words
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  2021 - Current |
                  <span class="semi-bold">Frontend Developer</span> |
                  <span class="bold">SAT League</span>
                </div>
                <div>Staff</div>
                <div>
                  Make landing page section of the initial appearance, etc.
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  2022 - Current |
                  <span class="semi-bold">Game Developer</span> |
                  <span class="bold">Schematics ITS Surabaya</span>
                </div>
                <div>Expert Staff</div>
                <div>
                  Make games using the unity and c# applications as the
                  programming language
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  2022 - Current |
                  <span class="semi-bold">Backend Developer</span> |
                  <span class="bold">ITS Expo</span>
                </div>
                <div>Staff</div>
                <div>
                  Creating databases, maintaining servers, maintenance using the
                  Laravel framework
                </div>
              </li>
            </ul>
            <ul>
              <li>
                <div>
                  2022 - Current |
                  <span class="semi-bold"> Backend Developer</span> |
                  <span class="bold">ITS MUN</span>
                </div>
                <div>Staff</div>
                <div>
                  Creating databases, maintaining servers, maintenance using the
                  golang framework
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>




Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 5 Pemrograman Berbasis Kerangka Kerja

Gambar
Nama     : M Naufal Badruttamam NRP        : 5025211240 Kelas      : PBKK B Tahun     : 2023 / 2024 (Ganjil) Link Github: https://github.com/Caknoooo/PBKK_Tugas_5_Web_Application/                     Tugas 5 Pemrograman Berbasis Kerangka Kerja Dalam tugas yang kami hadapi kali ini, yakni tugas ke-5, kami merasa antusias dan penuh semangat untuk menjalankan implementasi aplikasi berbasis Web Application dengan menggunakan .NET Framework. Proyek ini menjadi kesempatan bagi kami untuk menggabungkan pengetahuan dan keterampilan kami dalam pengembangan perangkat lunak. Kami memandangnya sebagai tantangan yang menarik, di mana kami akan merancang dan membangun aplikasi yang akan memberikan manfaat nyata. Tugas kelima ini bukan hanya tentang penyelesaian proyek, tetapi juga tentang kemampuan kami dalam memanfaatkan teknologi .NET Framework untuk menciptakan solusi inovatif berbasis web. Kami telah menantikan kesempatan ini dengan penuh semangat dan berkomitmen untuk memberikan hasil yang terb
Baca selengkapnya

Tugas 4 Pemrograman Berbasis Kerangka Kerja

Gambar
Nama     : M Naufal Badruttamam NRP        : 5025211240 Kelas      : PBKK B Tahun     : 2023 / 2024 (Ganjil) Link Github: https://github.com/Caknoooo/PBKK_Tugas_4_UWP                     Tugas 4 Pemrograman Berbasis Kerangka Kerja Pada tugas kali ke-4 ini, kami diberikan materi terkait UWP (Universal Windows Platform), sebuah kerangka pengembangan dalam ekosistem .NET yang memiliki kemampuan luar biasa. UWP memungkinkan pengembang untuk menciptakan aplikasi dengan kemampuan lintas platform yang dapat berjalan di berbagai perangkat. Hal ini mencakup tidak hanya PC Windows, tetapi juga tablet, smartphone, dan perangkat lainnya yang menggunakan sistem operasi Windows. Dengan UWP, pengembang dapat memanfaatkan fitur-fitur canggih, seperti tampilan responsif, integrasi dengan sistem operasi, dan dukungan untuk berbagai perangkat keras, sehingga memungkinkan pengguna untuk memiliki pengalaman yang seragam dan konsisten di seluruh perangkat Windows yang mereka gunakan. Dengan kata lain, UWP m
Baca selengkapnya

Tugas 7 Pemrograman Berbasis Kerangka Kerja

Gambar
Nama     : M Naufal Badruttamam NRP        : 5025211240 Kelas      : PBKK B Tahun     : 2023 / 2024 (Ganjil) Github: https://github.com/Caknoooo/PBKK_Tugas_7_Simple_Codeigniter                    Tugas 7 Pemrograman Berbasis Kerangka Kerja Pada tugas 7 kali ini, kami diberikan tugas untuk mengimplementasikan hasil dari pembelajarin kami terkait perkenalan Framework yang sudah cukup lama yaitu Codeigniter atau biasa disingkat CI. CodeIgniter sering dipilih karena keseimbangan yang baik antara ringan dan cepatnya kinerja, penggunaan arsitektur MVC yang memungkinkan pemisahan jelas antara logika bisnis, tampilan, dan pengendalian, serta dokumentasi yang lengkap yang memudahkan pengembang untuk memahami dan memanfaatkan fitur-fitur kerangka kerja ini. Selain itu, aktifitas pengembangan yang terus-menerus, mudahnya kurva belajar, dan fleksibilitas dalam merancang aplikasi sesuai kebutuhan merupakan alasan tambahan. CodeIgniter juga memiliki komunitas pengembang yang kuat, menyediakan berbag
Baca selengkapnya