Tugas 1 PWEB-B : Membuat CV

on


Link CV :


Langkah-Langkah Membuat CV :

1. Menggunakan referensi UI untuk CV dari Behance, kemudian melakukan redesign menggunakan Figma

2. Menggunakan bahasa pemrograman HTML dan CSS dengan framework Bootstrap 5. 

Tujuan menggunakan Bootstrap 5 yaitu supaya web dapat berjalan secara responsive.

3. Membuat Landing Page

Pada tampilan landing page terdapat navigation bar yang terdiri dari 4 menu, yaitu Home, About, Experiences, dan Contact. Apabila salah satu menu ini diklik maka tampilan akan terscroll ke bawah sesuai masing-masing section menu. Tampilan Home seperti gambar diatas yang berisi navigation bar dan identitas singkat. Section About berisi identitas diri, section Experiences berisi pengalaman project dan kegiatan yang pernah diikuti, dan section Contact berisi informasi kontak yang dapat dihubungi.

    
        
Navigation bar menggunakan navbar-toggler agar navigation bar dapat di extend atau           pun collapse sesuai dengan screen size dengan membuat sebuah navbar class yang             digunakan untuk responsive collapse class. Sehingga ketika screen size menjadi kecil,         navbar muncul sebagai tampilan menu yang dapat diakses dengan mengklik hamburger icon pada pojok kanan atas layar, seperti pada gambar berikut


Menggunakan tipe fixed untuk background-attachment supaya gambar yang digunakan        untuk background tidak bergerak atau ter-scroll ketika meng-scroll ke atas atau ke            bawah.


4. Membuat Konten Section About

Pada tampilan section About terdapat informasi identitas diri, seperti Full Name, Student ID atau NRP, dan Birth Date, profil singkat, dan pendidikan yang sudah ditempuh. Section ini dibagi menjadi dua kolom, yaitu kolom kiri yang berisi nama section, Full Name, Student ID, dan Birth Date. Sementara itu, pada kolom kanan berisi About Me dan  Education. Kemudian, pada kolom kanan dibagi menjadi dua row, dimana row pertama berisi About Me dan row kedua berisi Education.



5. Membuat Konten Section Experiences

Pada tampilan section Experiences terdapat informasi pengalaman project yang pernah dikerjakan dan kegiatan yang pernah diikuti. Section ini dibagi menjadi dua kolom, yaitu kolom kiri yang berisi nama section dan kolom kanan yang berisi isi section. Kemudian, pada kolom kanan dibagi menjadi beberapa row, dimana masing-masing row berisi pengalaman project yang pernah dikerjakan dan kegiatan yang pernah diikuti.




6. Membuat Konten Section Contact

Pada tampilan section Contact terdapat informasi mengenai kontak, yaitu nomor telepon, alamat, email, dan link LinkedIn. Section ini dibagi menjadi dua kolom, yaitu kolom kiri yang berisi nama section dan informasi kontak yang bisa dihubungi dan kolom kanan yang berisi ilustrasi grafis. 


7. Membuat Repository di Github

Membuat repository di github dengan nama Pemrograman Web B untuk menyimpan file    script css, gambar, javascript, dan file html. File tersebut dipush menggunakan Github            Desktop. Supaya semua file ini dapat dideploy, tidak perlu membuat file readme.




8. Melakukan Deployment Repository Github

Untuk melakukan deployment pada repository, menuju ke Settings kemudian memilih            Github Pages. Kemudian, mengubah source menjadi main dan pathnya adalah root.            Setelah di save, menunggu beberapa menit lalu link domain tersedia.

 




9. Website CV dapat diakses melalui https://erzajanitra.github.io/Pemrograman-Web-B/



Dokumentasi Source Code :

Link Repository Github : 
    https://github.com/erzajanitra/Pemrograman-Web-B

HTML Script :
<!DOCTYPE html>
<html lang="en">
<!-- This source code is exported from pxCode, you can get more document from https://www.pxcode.io -->
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<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=Manrope&display=swap" rel="stylesheet"
</head>
<!-- ======= navbar ======= -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#abouts">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experiences">Experiences</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacts">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- ======= navbar ======= -->
<!-- ======= home ======= -->
<section class="hero d-flex align-items-center" style=" background: #FEFEF3 url(img/homebg.jpg); background-position: center;
background-repeat: no-repeat;
background-size: cover;" >
<div class="container">
<div class="row align-items-center">
<div class="col">
<h1>Hi, I’m Erza</h1>
<P> Informatics Engineering Student at Institut
Teknologi Sepuluh Nopember
</P>
</div>
</div>
</div>
</section>
<!-- ======= End section1 ======= -->
<!-- ======= about ======= -->
<section class="abouts">
<div id = "abouts"></div>
<div class="container">
<div class="row align-lg-start">
<div class="col">
<h1>About</h1>
<h6><br><strong>Full Name</strong> </h6>
<P>
Erza Janitradevi Nadine
</P>
<h6><strong>Student ID</strong> </h6>
<P>
05111940000153
</P>
<h6><strong>Birth Date</strong> </h6>
<P>
March 23rd, 2002
</P>
</div>
<div class="col">
<h4 class="test1-section2__subtitle layout">
<br><br> <strong>About Me </strong> <br>
</h4>
<P>
Born in Surabaya and spent my childhood in Denpasar, I was genuinely influenced by
Javanese and Balinese culture. Over 9 years in Denpasar, I and my family came back
to Surabaya and stay in Surabaya until now. I highly appreciate arts, literature, and technology.
I have interested in many things, such as music,
dance, books, artificial intelligence, psychology, and UI & UX Design.
<P>
<div class="row">
<h4 class="test1-section2__subtitle layout">
<br> <strong>Education </strong>
</h4>
<P> <strong>2019 - Present</strong><br>
Institut Teknologi Sepuluh Nopember
<br>Undergraduate Student of Informatics
Engineering<br><br>
<strong>2016 - 2019 </strong>
<br> SMA Negeri 5 Surabaya<br>
Science Major
<br><br>
<strong>2013 - 2016 </strong>
<br> SMP Negeri 17 Surabaya<br>
Science Major
</P>
</div>
</div>
</div>
</section>
<!-- ======= End section1 ======= -->
<!-- ======= experiences ======= -->
<section class="experiences">
<div id = "experiences"></div>
<div class="container">
<div class="row align-lg-start">
<div class="col">
<h1>Experiences</h1>
</div>
<div class="col">
<h4 class="test1-section2__subtitle layout">
<strong> Product Development Intern of Kalbe E-Health</strong>
</h4>
<P>
As a product development intern I manages the process of developing a product or enhancing existing products in
order to meet customer expectations effectively.I also conduct research,
develop proposals, and supervise the design process.
<P>
<div class="row">
<h4 class="test1-section2__subtitle layout">
<br> <strong>Documentation Team of PPDB SMA Sumatera Selatan 2021</strong>
</h4>
<P>
PPDB is a system designed as a sources of information and
management of the selection process of senior high school based
on online. As a member of documentation team, I created
documentation about user flow for the website, manage guidebook
of PPDB, and give assistance to user who are using the website.
<P>
</div>
<div class="row">
<h4 class="test1-section2__subtitle layout">
<br> <strong>Documentation Team of PPDB SMA & SMK Riau 2021</strong>
</h4>
<P>
PPDB is a system designed as a sources of information and
management of the selection process of senior high school based
on online. As a member of documentation team, I created
documentation about user flow for the website, manage guidebook
of PPDB, and give assistance to user who are using the website.
<P>
</div>
<div class="row">
<h4 class="test1-section2__subtitle layout">
<strong>Administrators of Informatics Engineering’s GIGa Laboratory</strong>
</h4>
<P>
The Interaction of Graphics, Art, and Game (GIGa) Laboratory expertise areas include game development
techniques, game systems, computer animation, 3D Modelling, and Virtual Reality and Augmentation.
<P>
</div>
<div class="row">
<h4 class="test1-section2__subtitle layout">
<strong> Teaching Assistant of Informatics Engineering</strong>
</h4>
<P>
As a teaching assistant of Digital Systems, I had responsibility to coordinate with lecturer
about the class materials and helped lecturer to check the students works.<P>
</div>
</div>
</div>
</section>
<!-- ======= End section1 ======= -->
<!-- ======= contact ======= -->
<section class="contacts align-content-lg-start">
<div id = "contacts"></div>
<div class="container">
<div class="row align-items-lg-start">
<div class="col">
<h1>Contact</h1>
<div class="row">
<P><br> Phone : +6282245185912<br>
Address : Jl. Wiguna Timur VII No.32, Surabaya <br>
Email : erzan63@gmail.com<br>
LinkedIn : www.linkedin.com/in/erzajanitradevi
</P>
</div>
</div>
<div class="col">
<img src="img/Group 12.png" alt="">
</div>
</div>
</div>
</section>
<!-- ======= End section1 ======= -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

CSS Script :

>
body{
font-family: 'Manrope', sans-serif;
}
P2{
font-size: 40;
font-weight: 3500;
}
img{
margin-right: 50px;
}
.navbar{
background: #FEFEF3 !important;
padding-right: 4rem;
}
.navbar .nav-item{
margin: 0 !important;
padding: 0 !important;
}
.navbar .nav-item .nav-link{
font-size: 20;
font-weight: 700;
color: 00000;
margin: 25 !important;
padding: 100 !important;
margin-right: 50px;
}
.hero{
padding-top: 8rem;
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 8rem;
/* background: #FEFEF3 url(img/homebg.jpg); */
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
min-height: 720px;
display: table;
position: relative;
text-align: center;
}
.hero h1 {
color: #FFFFFF;
font-family: "poppins-medium", sans-serif;
font-size: 4rem;
line-height: 1.071;
max-width: 900px;
margin-top: 0;
margin-bottom: .6rem;
margin-left: auto;
margin-right: auto;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.hero P{
color: #FFFFFF;
}
.abouts{
padding-top: 8rem;
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 8rem;
background: #FEFEF3 !important;
text-align: justify
}
.experiences{
padding-top: 8rem;
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 8rem;
background: #F8F2F9 !important;
text-align: justify
}
.contacts{
padding-top: 8rem;
padding-bottom: 5rem;
background: #FEFEF3!important;
text-align: justify
}
view raw main.css hosted with ❤ by GitHub

Comments

Post a Comment