LAPORAN PROJEK WORK

MEMBUAT APLIKASI PORTOFOLIO

Dengan menggunakan HTML, CSS dan JAVASCRIPT

Disusun oleh : Kelompok 5 – XI RPL 1

Najwa Naura Nurhasanah
Nanda Selvia Razis A
Reva Aulia Alghifari
Salsa Sabila
Sarah Aulia
Zahwa Azzahra Nurfauzi

Tugas PWEB Pembuatan Laporan / Makalah

SMKN 2 PURWAKARTA
Jl. Jendral Ahmad Yani No.98 Negri Tengah
Kec. Purwakarta Kab. Purwakarta Jawa Barat 41114
 KATA PENGANTAR

Puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan hidayah-Nya
sehingga saya dapat menyelesaikan tugas makalah yang berjudul ‘Membuat Aplikasi
Portfolio’ ini tepat pada waktunya.

Adapun tujuan dari penulisan makalah ini adalah untuk memenuhi

tugas pada Pemrograman Web dan perangkat Bergerak. Selain itu, makalah ini juga
bertujuan untuk menambah wawasan tentang Cara membuat portfolio berbasis web bagi
para pembaca dan juga bagi penulis.

Saya mengucapkan terima kasih kepada Bapak guru yang telah memberikan tugas ini
sehingga dapat menambah pengetahuan dan wawasan sesuai dengan Jurusan yang saya tekuni.

Saya juga mengucapkan terima kasih kepada semua pihak yang telah membagi
sebagian pengetahuannya sehingga saya dapat menyelesaikan makalah ini.Saya menyadari,
makalah yang saya tulis ini masih jauh dari kata sempurna. Oleh karena itu, kritik dan saran
yang membangun akan saya nantikan demi kesempurnaan makalah ini.

Purwakarta, 30 Maret 2022

Penulis
 BAB I
PENDAHULUAN

A. Latar Belakang
Pada masa sekarang ini, perkembangan teknologi informasi sudah semakin luas
dan secara langsung telah mempengaruhi ke dalam setiap aspek kehidupan kita.
Bahkan sekarang masyarakat luas sudah memanfaatkan teknologi internet untuk
mendorong kemajuan teknologi.
Disamping adanya teknologi komputer, untuk mendukung semua aktifitas
diseluruh bidang serta untuk meningkatkan efisiensi dan kecepatan pelayanan
membutuhkan banyak sumber daya yang handal dan mampu untuk mengoperasikan
komputer dengan baik. Untuk itulah penulis mencoba merancang dan membangun
sebuah Aplikasi/website Portfolio agar bisa digunakan dengan baik dan semestinya.
Biasanya Portofolio ditampilkan dalam bentuk Hardcopy atau berkas cetak
yang menunjukkan berbagai pencapaian. Namun seiring perkembangan teknologi,
kamu bisa membuatnya secara online. Media social juga bisa membantumu dalam
membuatnya, tetapi cara paling efektif adalah dengan website. Karena itu, rekam jejak
pencapaian yang dibuat bisa disebut dengan website portofolio.
Meskipun melakukan hal ini memang tidak selalu menarik banyak perhatian
orang. Paling tidak dengan adanya hasil karya yang ditunjukkan di media online, kamu
bisa menyimpan karya-karyamu agar tetap lestari dan tidak termakan zaman.

B. Identifikasi Masalah
Dalam pembuatan website ini terdapat beberapa permasalahan yang menjadi titik
pembahasan pada website ini adalah :
1. Tampilan atau rupa Portofolio yang ada selama ini belum kompleks sehingga
dibutuhkannya konten yang lebih lengkap, untuk memudahkan para fresh graduate
dalam proses melamar kerja.
2. Dibutuhkan sarana online sebagai tempat berbagi (sharing) yang dapat di akses
kapan pun dan dimana pun, baik oleh umum ataupun pihak perusahaan yang
membutuhkan karyawan.
C. Rumusan Masalah
Dalam pembuatan website ini terdapat beberapa permasalahan yang menjadi titik
pembahasan pada website ini adalah :
1. Bagaimana merancang website Portofolio dengan menggunakan HTML, CSS dan
JAVASCRIPT ?
2. Bagaimana memanfaatkan media berbasis online dalam website Portofolio untuk
media berbagi Informasi ?

D. Sistematika Penulisan Laporan

Adapun penulisan laporan ini dibagi dalam empat bab. Setelah Bab I ini yang berisi
Latar Belakang, Identifikasi Masalah, Rumusan Masalah dan Sistematika Penulisan,
bab-bab berikut penulis bagi menjadi :
BAB I : PENDAHULUAN
Bab ini merupakan pengantar terhadap permasalahan yang akan
dibahas. Didalamnya menguraikan tentang gambaran suatu penelitian
yang terdiri dari : Latar Belakang, Identifikasi masalah, Rumusan
masalah dan Sistematika Penulisan Laporan.
BAB II : LANDASAN TEORI
Pada Bab ini dibahas mengenai teori-teori yang digunakan sebagai
acuan didalam pembahasan masalah dan mengimplementasikan system.
BAB III : PEMBAHASAN
Bab ini membahas tentang pengembangan sistem aplikasi portfolio dan
metode apa saja yang akan dibahas dalam perancangan system web yang
akan dibuat.
BAB IV : KESIMPULAN DAN SARAN
Bab yang memuat kesimpulan dari aplikasi sistem aplikasi Portofolio
berbasis web serta permasalahan yang diperoleh melalui penelitian,
serta saran-saran sebagai masukan dikemudian hari.
 BAB II
LANDASAN TEORI

A. Tentang Aplikasi
Wesbite portofolio adalah portofolio digital yang dapat diakses melalui internet
dengan tujuan untuk menunjukan karya dan bakat Anda. Pada website yang dibuat,
Anda bisa menunjukkan bakat, keahlian dan pengalaman yang telah Anda miliki.

B. Konsep dasar Web

Pada saat ini teknologi berkembang sangat pesat, hal ini disebabkan oleh banyak
faktor diantaranya perkembangan pola fikir masyarakat yang cukup pesat, untuk
memenuhi kebutuhan masyarakat dalam hal informasi dan ilmu pengetahuan serta
mekanis dunia kerja, maka dibutuhkan para pengembang aplikasi web supaya dapat
terus beraktivitas dan berinovasi. Web suatu jaringan yang bisa mempermudah serta
mempercepat penyampaian informasi secara luas, dan dapat diakses dengan mudah dan
cepat oleh siapapun yang mendapatkan akses internet.

C. Web Browser
Hampir setiap peralatan elektronik saat ini dilengkapi oleh web browser, mulai
dari komputer, handphone ataupun gadget telah dilengkkapi web browser yang biasa
digunakan untuk menjelajah internet. Web browser dapat diartikan sebagai tools atau
aplikasi yang digunakan untuk mencari informasi, membuka atau menjelajah halaman
internet melalui web.

D. Bahasa Pemrograman
Bahasa pemrograman suatu perangkat lunak yang menggunakan bahasa-bahasa
pemrograman yang digunakan untuk merancang atau membuat program sesuai
keinginan dan kegunaan.
1. HTML (Hypertext Markup Language)
Adalah bahasa markup yang digunakan untuk membuat halaman website. Isinya
terdiri dari berbagai kode yang dapat menyusun struktur suatu website. HTML
terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file.
 2. CSS (Cascading Style Sheets)
Adalah bahasa yang digunakan untuk menentukan tampilan dan format halaman
website. Dengan CSS, kita bisa mengatur jenis font, warna tulisan, dan latar
belakang halaman. CSS juga digunakan bersama dengan bahasa markup, seperti
HTML dan XML untuk membangun sebuah website yang menarik dan memiliki
fungsi yang berjalan baik.
3. JavaScript
Adalah bahasa pemrograman yang digunakan dalam pengembangan website
agar lebih dinamis dan interaktif. JavaScript dapat meningkatkan fungsionalitas
pada halaman web. Bahkan dengan JavaScript ini kamu bisa membuat aplikasi,
tools, atau bahkan game pada web.

E. Tahapan Perancangan
Tahapan perancangan sistem adalah merancang sistem dengan terperinci
berdasarkan hasil analisis sistem, sehingga menghasilkan model system baru.
1. Perancangan Output
Perancangan output tidak dapat diabaikan, karena laporan yang dihasilkan harus
memudahkan bagi setiap unsur manusia yang membutuhkan.
2. Perancangan Input
Tujuan dari perancangan input yaitu dapat mengefektifkan biaya pemasukan
data, mencapai keakuratan yang tinggi, dan dapat menjamin pemasukkan data yang
akan diterima dan dimengerti oleh pemakai.
3. Perancangan Proses
Sistem tujuan dari perancangan proses system adalah menjaga agar proses data
lancar sehingga dapat menghasilkan informasi yang benar dan mengawasi proses
dari sistem.

F. Fungsi Interface
Pada interface aplikasi Portofolio berbasis web ini menggunakan bahasa
pemrograman HTML, CSS, dan JavaScript.
1. HTML berfungsi sebagai kerangka pada web.
2. CSS berfungsi untuk menambah tampilan desain pada halaman web.
3. JavaScript berfungsi untuk menambahkan fungsi-fungsi agar web bisa digunakan
lebih optimal.
 BAB III
PEMBAHASAN

A. Gambaran Umum
Seiring dengan perkembangan internet sebagai media online dimana jutaan
orang dapat melakukan apapun salah satunya pencarian data atau informasi, medianya
pun beragam mulai dari mesin pencarian, sosial media, website dan lain-lain, ketika
seseorang membutuhkan apa yang dicarinya lalu menemukan di internet orang akan
berfikir tentang betapa mudahnya informasi itu di dapatkan, internet sebagai sumber
informasi yang tidak terbatas, lebih efisien, dan mudah dalam mengaksesnya.

Ketersediaan informasi yang tidak terbatas dan seiring dengan meningkatnya

keingintahuan seseorang akan informasi, akhirnya akan dibutuhkan suatu layanan
seperti website yang memungkinkan mereka mendapatkan informasi sesuai kebutuhan
yang diinginkan bahkan hal baru yang belum mereka ketahui sebelumnya. Sebagai
media informasi yang menyimpan banyak jumlah data dengan bermacam informasi,
muncul pula keinginan seseorang untuk mendapatkan kemudahan dari media dalam
mengakses informasi tadi agar informasinya benar benar sesuai yang di inginkan,
diperlukanlah adanya sistem rekomendasi yang merekomendasi agar informasi yang
dicari hanya yang sesuai dengan keinginan atau kesukaan. Sehingga hasil pencarian
akan lebih baik karena semua yang muncul hanya yang sesuai keinginan.

B. Perancangan Sistem
Setelah melakukan analisa masalah maka langkah selanjutnya adalah
melakukan perancangan sistem. Perancangan sistem ini berguna untuk memberikan
gambaran tentang fungsionalitas sistem yang akan dibuat yang diharapkan dapat
membantu dalam penyelesaian masalah. Perancangan sistem ini akan dijelaskan
melalui desain aplikasi dan desain antarmuka.
C. Perangkat Keras
Perangkat keras yaitu peralatan komputer yang secara fisik berfungsi untuk
membuat aplikasi. Sistem perangkat keras terdiri dari bagian input, bagian proses,
bagian output dan bagian untuk melakukan percobaan aplikasi.
1. Laptop
Device name : DESKTOP-G7DI21U
Processor : Intel(R) Pentium(R) CPU N3710 @ 1.60GHz 1.60 GHz
Installed RAM : 8.00 GB
Device ID : 65E6AA66-60C3-46B3-A545-DC58EBFB9BBA
Product ID : 00331-10000-00001-AA565
System type : 64-bit operating system, x64-based processor
Pen and touch : Pen support

D. Perangkat Lunak
Perangkat lunak merupakan alat penunjang untuk membangun aplikasi. Perangkat
lunak yang digunakan di aplikasi ini ialah :
1. Editor text ( Sublime text )
2. Web Browser ( Chrome )
 BAB IV
KESIMPULAN

A. Kesimpulan
Pembangunan media berbasis website ini memudahkan bagi pengakses website
baik itu konsumen maupun user umum untuk memperoleh informasi pribadi. Aplikasi
yang telah dibangun ini berhasil menampilkan beberapa info seperti profil, skill, kontak
dan beberapa gambar portofolio.
Dari hasil yang telah kami kerjakan, kami telah membuat Aplikasi Portofolio
berbasis website yang menggunakan HTML, CSS dan JavaScript.

B. Saran
1. Pembuatan website ini masih sangat terbilang sederhana, terutama dari segi
tampilan, ada baiknya untuk tahap pengembangan sistem baru diharapkan dibuat
semenarik mungkin dan dikembangkan lebih lanjut dengan tambahan informasi
yang lebih lengkap lagi yang pastinya bisa lebih bermanfaat bagi pengelola dan
pengguna website tersebut.
2. Perancangan website ini diharapkan bisa lebih interaktif agar informasi yang
diinginkan pengguna dapat lebih bermanfaat lagi.
3. Agar website ini dapat ditampilkan dengan optimal maka diperlukan adanya
dukungan perangkat keras dan perangkat lunak yang memadai.
 LAMPIRAN

A. Output
B. Source Code
1. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.13.0/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=
swap" rel="stylesheet">
<title> Web PORTOFOLIO </title>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">˄</button>

<!-- sidebar -->

<input type="checkbox" id="check" name="">
<div class="sidebar">
<ul>
<li><a href="#about"> Tentang </a></li>
<li><a href="#skills"> Skill </a></li>
<li><a href="#portfolio"> Portofolio </a></li>
<li><a href="#contact"> Kontak </a></li>
</ul>
</div>
<header>
<div class="container">
<h1><a href=""> NAWA </a></h1>
<ul>
<li><a href="#about"> Tentang </a></li>
<li><a href="#skills"> Skill </a></li>
<li><a href="#portfolio"> Portofolio </a></li>
<li><a href="#contact"> Kontak </a></li>
</ul>

<!-- menu mobile -->

<label for="check" class="mobile-menu"><i class="fas fa-bars
fa2x"></i></label>
</div>
</header>

<!-- bagian banner -->

<section class="banner">
<div class="container">
<div class="banner-left">
<img src="img/naw.jpeg">
<h2> Hai. . . <br>
Saya adalah seorang <span class="efek-ngetik"></span></h2>
<p>Selamat datang di website Portofolio saya</p>
</div>
</div>
</section>

<!-- bagian about -->

<section id="about">
<div class="container">
<h3>Tentang</h3>
<p> Najwa Naura Nurhasanah, lahir di
Purwakarta pada tanggal 28 Agustus 2006. Pendidikan yang
telah dilalui nya yaitu TK RA As-Syifa, SDn 1 Jatiluhur,
MTSs MAI Purwakarta. Saat ini sedang menerjang pendidikan
di SMK Negeri 2 Purwakarta. </p>

<p> Saat ini najwa sedang melanjutkan

pendidikan nya di SMK Negeri 2 Purwakarta. Najwa memilih
RPL ( Rekayasa Perangkat Lunak) sebagai jurusan yang
ditekuni. Ia memiliki banyak hobi untuk mengisi waktu luang
nya seperti Membaca buku, bermain catur, merajut, bermain
musik, dan lain-lain. </p>
</div>
</section>

<!-- bagian skills -->

<section id="skills">
<div class="container">
<h3>Skill</h3>
<h4> LEADERSHIP </h4>
<div class="bar">
<span class="nilai html">100%</span>
</div>

<h4> MANAGEMENT </h4>

<div class="bar">
 <span class="nilai css">95%</span>
</div>

<h4> PUBLIC SPEAKING </h4>

<div class="bar">
<span class="nilai js">85%</span>
</div>

<h4> ENGLISH SKILLS </h4>

<div class="bar">
<span class="nilai php">90%</span>
</div>

<h4> MATH </h4>

<div class="bar">
<span class="nilai edit">60%</span>
</div>
</div>
</section>

<!-- bagian portfolio -->

<section id="portfolio">
<div class="container">
<h3> Portofolio </h3>
<div class="col-4">
<a href="">
<img src="img/linktree.png">
<span> linktree </span>
</a>
</div>

<div class="col-4">
<a href="">
<img src="img/code.png">
<span> coding </span>
</a>
</div>

<div class="col-4">
<a href="">
<img src="img/ppt.png">
<span> PowerPoint management </span>
</a>
</div>
 <div class="col-4">
<a href="">
<img src="img/crochet.jpg">
<span> Merajut </span>
</a>
</div>

<div class="col-4">
<a href="">
<img src="img/mb.png">
<span> Digital Drawing </span>
</a>
</div>

<div class="col-4">
<a href="">
<img src="img/chess.png">
<span> Playing Chess </span>
</a>
</div>

<div class="col-4">
<a href="">
<img src="img/word.png">
<span> Ms Word /Proposal Management
</span>
</a>
</div>

<div class="col-4">
<a href="">
<img src="img/speech.jpg">
<span> English Speech </span>
</a>
</div>
</div>
</section>

<!-- bagian contact -->

<section id="contact">
<div class="container">
<h3> Kontak </h3>
<div class="col-3">
 <h4>Address</h4>
<p> Kp. Cilegong Selatan Rt014 Rw004 Ds. Jatiluhur
Kec. Jatiluhur Kab. Purwakarta </p>
</div>

<div class="col-3">
<h4> Email </h4>
<p> Najwanurhasanah230@gmail.com </p>
</div>

<div class="col-3">
<h4> Telepon </h4>
<p> +62 813 1277 8126 </a></p>
</div>
</div>
</section>

<!-- bagian footer -->

<footer>
<div class="container">
<small> Copyright &copy; 2022 - XI RPL1 PWEB Kelompok
5. </small>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
2. style.css
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #A6ACAF;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}

#myBtn:hover {
background-color: #555;
}
*{
padding:0;
margin:0;
font-family: 'Quicksand', sans-serif;
color: #333;
}
header {
height:70px;
}
header h1 {
display: inline-block;
float: left;
padding:15px 24px;
text-transform: uppercase;
}
header h1 a {
transition: .3s;
}
header h1 a:hover {
color: #A6ACAF;
}
header ul {
float: right;
}
header ul li {
padding:24px;
display: inline-block;
}
header ul li a {
transition: .3s;
}
header ul li a:hover {
color: #A6ACAF;
}
a{
text-decoration: none;
}
.container {
width:90%;
margin:0 auto;
}
.container::after {
content: '';
display: block;
clear: both;
}
.mobile-menu {
float: right;
display: none;
padding:18px;
}
.mobile-menu:hover {
cursor: pointer;
}
#check {
display: none;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: -300px;
width:300px;
background-color: rgba(16, 47, 80, .9);
transition: .3s;
z-index: 9999;
}
.sidebar ul li a {
 color: #fff;
}
.sidebar ul li {
padding:24px;
transition: .3s;
transition-property: background-color;
}
.sidebar ul li:hover {
background-color: #F84744;
}
#check:checked ~ .sidebar {
left: 0;
}
.banner {
background-image: url('../img/bg1.jpg');
padding:150px 0;
max-width: 100%;
height: auto;
background-size: 1200px;
}
.banner background-image {
filter: blur(5px);
}
section {
padding:50px 0;
}
.banner img {
width: 100px;
border-radius: 10px;
box-shadow: 0 3px 5px #ddd;
margin-bottom: 10px;
}
.banner h2,
.banner p,
.banner span {
color: #fff;
}
.banner h2 {
margin-bottom: 10px;
}
.banner p {
font-size: 18px;
}
.banner-left {
 padding-left:24px;
}
section h3 {
padding-bottom: 20px;
text-align: center;
margin:20px;
position: relative;
}
section h3::before {
content:'';
display: block;
position: absolute;
bottom: 0;
width:120px;
height:1px;
background-color: #ddd;
left: calc(50% - 60px);
}
section h3::after {
content:'';
display: block;
position: absolute;
bottom: -1px;
width:40px;
height:4px;
background-color: #F84744;
left: calc(50% - 20px);
}
#about p {
text-align: justify;
text-indent: 30px;
line-height: 25px;
margin-bottom: 15px;
}
#skills,
#contact {
background-color: #f9f9f9;
}
#skills .bar {
height: 30px;
background-color: #fff;
border:1px solid #ddd;
margin: 5px 0 20px 0;
}
.bar .nilai {
height:30px;
background-color: #F84744;
display: inline-block;
color: #fff;
text-align: center;
}
.html {
width:100%;
}
.css {
width:95%;
}
.js {
width:85%;
}
.php {
width:90%;
}
.edit {
width:60%;
}
.col-4 {
width:25%;
box-sizing: border-box;
padding:5px;
float: left;
text-align: center;
margin-bottom: 20px;
}
.col-4 img {
width:100%;
height: 200px;
}
.col-4 a:hover img {
transform: scale(1.2);
}
.col-3 {
width:33.33%;
box-sizing: border-box;
float: left;
text-align: center;
padding:50px 10px;
}
.col-3 h4 {
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
footer {
background-color: #333;
padding:50px;
text-align: center;
}
footer small {
color: #fff;
}
html {
scroll-behavior: smooth;
}

@media (max-width: 768px){

.mobile-menu {
display: block;
}
header ul {
display: none;
}
.col-4 {
width:50%;
}
.col-3 {
width:100%;
}
}
3. script.js
// Get the button
let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
{
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

const txtElement = ['Pelajar', 'Freelancer', 'Web Developer'];

let count = 0;
let txtIndex = 0;
let currentTxt = '';
let words = '';

(function ngetik(){

if (count == txtElement.length){
count = 0;
}

currentTxt = txtElement[count];

words = currentTxt.slice(0, ++txtIndex);

document.querySelector('.efek-ngetik').textContent = words;

if (words.length == currentTxt.length){
count++;
txtIndex = 0;
}
 setTimeout(ngetik, 500);

})();