Tugas 1: Membuat Curriculum Vitae pada Static Website

Nama: Aulia Eka Putri Aryani
NRP: 05111940000044
Kelas: PWEB-B
Link Web: https://auliaaepa.github.io/curriculum-vitae/
Link Source Code: https://github.com/auliaaepa/curriculum-vitae/

Pembahasan

Pada postingan kali ini, saya akan membahas tugas Pemrograman Web (PWEB) pertama saya. Pada pertemuan sebelumnya, saya diminta untuk membuat Curriculum Vitae pada static website dan mempublikasikannya pada sebuah domain.

Pada static website yang saya buat, saya memanfaatkan Github Pages sebagai space meletakkan source code yang telah saya buat (hosting). Adapun, konten dari static website Curriculum Vitae yang saya buat yaitu:

Deskripsi diri
Pendidikan
Pengalaman
Pelatihan
Informasi kontak

Berikut adalah tampilan dari static website Curriculum Vitae yang saya buat.

Adapun, source code HTML dan CSS yang saya gunakan adalah sebagai berikut.

	<!DOCTYPE html>
	<html>
	<head>
	<title>CV Aulia</title>
	<link rel="stylesheet" href="assets/style/style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>

	<body>
	<header>
	<nav>
	<div id="user">
	<a href=#><b>AuliAAEPA</b></a>
	</div>
	<div id="navigation">
	<ul>
	<li><a href=#tentang>Tentang</a></li>
	<li><a href=#pendidikan>Pendidikan</a></li>
	<li><a href=#pengalaman>Pengalaman</a></li>
	<li><a href=#pelatihan>Pelatihan</a></li>
	<li><a href=#kontak>Kontak</a></li>
	</ul>
	</div>
	</nav>
	</header>

	<main>
	<div id="tentang" class="card">
	<h2>Tentang</h2>
	<section class="content">
	<div class="photo">
	<img src="assets/image/foto-crop.jpg" class="img-photo" alt="foto">
	</div>
	<div class="bio">
	<h2>Hai, <span class="intro">saya Aulia Eka Putri Aryani!</span></h2>
	<p>
	Saya mahasiswa S1 jurusan Teknik Informatika di Institut Teknologi Sepuluh Nopember (ITS).
	Saya berusia 19 tahun. Saya lahir di Wonogiri, 14 Agustus 2002.
	Saat ini, saya tertarik dan aktif mepelajari bidang machine learning dan data mining.
	Saya adalah orang yang senang mempelajari hal baru dan memiliki komitmen tinggi untuk menyelesaikan
	sesuatu dengan sebaik mungkin.
	Untuk mengasah softskill saya, saya aktif dalam beberapa kegiatan kepanitiaan dan organisasi.
	Selain itu, saya mengikuti pelatihan-pelatihan resmi untuk menunjang skill-skill yang saya miliki.
	</p>
	</div>
	</section>
	</div>

	<div id="pendidikan" class="card">
	<h2>Pendidikan</h2>
	<section class="content">
	<div id="container1">
	<div class="container-icon">
	<img class="icon" src="assets/image/icons8-graduation-cap-100.png">
	</div>
	<div class="year"><b>2019 - Sekarang</b></div>
	<div class="school"><b>Institut Teknologi Sepuluh Nopember</b></div>
	<div class="major">Departemen Teknik Informatika</div>
	<br>
	<div class="container-icon">
	<img class="icon" src="assets/image/icons8-graduation-cap-100.png">
	</div>
	<div class="year"><b>2016 - 2019</b></div>
	<div class="school"><b>SMA Negeri 1 Sidoarjo</b></div>
	<div class="major">Peminatan IPA</div>
	<br>
	</div>
	<div id="container2">
	<div class="container-icon">
	<img class="icon" src="assets/image/icons8-graduation-cap-100.png">
	</div>
	<div class="year"><b>2014 - 2016</b></div>
	<div class="school"><b>SMP Negeri 3 Sidoarjo</b></div>
	<br>
	<div class="container-icon">
	<img class="icon" src="assets/image/icons8-graduation-cap-100.png">
	</div>
	<div class="year"><b>2008 - 2014</b></div>
	<div class="school"><b>SD Muhammadiyah 3 Taman</b></div>
	</div>
	</section>
	</div>

	<div id="pengalaman" class="card">
	<h2>Pengalaman</h2>
	<section class="content">
	<h3>Pengalaman Kerja</h3>
	<div class="title"><b>Asisten Dosen (Agustus 2021 - Sekarang)</b></div>
	<div class="subtitle">Sistem Basis Data oleh Imam Kuswardayan, S.Kom., MT</div>
	<div class="desc">
	<ul>
	<li>Membuat 1 mini quiz</li>
	<li>Membantu 26 mahasiswa dalam kelas</li>
	</ul>
	</div>
	</section>
	<section class="content">
	<h3>Pengalaman Organisasi</h3>
	<div class="title"><b>Himpunan Mahasiswa Teknik Computer-Informatika (Mei 2021 - Sekarang)</b></div>
	<div class="subtitle">Staff Kesejahteraan Mahasiswa</div>
	<div class="desc">
	<ul>
	<li>Membuat dan membagikan 4 informasi kemahasiswaan kepada mahasiswa Teknik Informatika</li>
	<li>Mengelola Sistem Informasi Kesejahteraan Mahasiswa HMTC</li>
	<li>Merancang webinar untuk mahasiswa baru</li>
	<li>Mengawasi 5 pengambilan kelas pada saat FRS</li>
	</ul>
	</div>
	<br>
	<div class="title"><b>Himpunan Mahasiswa Teknik Computer-Informatika (Maret - April 2021)</b></div>
	<div class="subtitle">Staff Magang Kesejahteraan Mahasiswa</div>
	<div class="desc">
	<ul>
	<li>Membuat dan membagikan 1 informasi beasiswa kepada mahasiswa Teknik Informatika</li>
	<!-- <li>snajksnka</li> -->
	</ul>
	</div>
	</section>
	<section class="content">
	<h3>Pengalaman Kepanitiaan</h3>
	<div class="title"><b>Schematics (Mei 2021 - Sekarang)</b></div>
	<div class="subtitle">Staff Ahli Website dan Kesekretariatan</div>
	<div class="desc">
	<ul>
	<li>Merancang skema pendaftaran setiap event</li>
	<li>Mendata dan memverifikasi pendaftaran 30 peserta</li>
	</ul>
	</div>
	<br>
	<div class="title"><b>Panitia Pemilihan Umum Himpunan Mahasiswa Teknik Computer-Informatika (Februari - Maret 2021)</b></div>
	<div class="subtitle">Kesekretariatan</div>
	<div class="desc">
	<ul>
	<li>Memeriksa dan memverifikasi pendaftaran 3 calon Kahima</li>
	<li>Mendata 400 orang Daftar Pemilu Tetap (DPT)</li>
	<li>Notulensi rapat internal dan 4 debat yang berlangsung</li>
	<li>Membuat surat undangan untuk dosen</li>
	</ul>
	</div>
	</section>
	</div>

	<div id="pelatihan" class="card">
	<h2>Pelatihan</h2>
	<section class="content">
	<h3>Pelatihan Profesional</h3>
	<div class="title"><b>Machine Learning Developer (April 2021)</b></div>
	<div class="subtitle">Dicoding Academy</div>
	<div class="desc">
	Mempelajari dasar visualisasi data dengan memanfaatkan Google Sheets sebagai tools nya,
	pemrograman dengan phyton, hingga machine learning untuk pemula dengan menggunakan
	Google Colaboratory dan Watson Studio.
	</div>
	<div class="container-sertif">
	<div class="sertif">
	<img id="sertif-visual" class="img-sertif" src="assets/image/sertif-1.jpg">
	<div class="caption-sertif">Sertifikat Kompetensi Dasar Visualisasi Data</div>
	</div>
	<div class="sertif">
	<img id="sertif-phyton" class="img-sertif" src="assets/image/sertif-2.jpg">
	<div class="caption-sertif">Sertifikat Kompetensi Pemrograman dengan Phyton</div>
	</div>
	</div>
	</section>
	<section class="content">
	<h3>Pelatihan Non-Profesional</h3>
	<div class="title"><b>Latihan Keterampilan Manajemen Mahasiswa Tingkat Dasar XXVII HMTC (Oktober 2020)</b></div>
	<div class="subtitle">Himpunan Mahasiswa Teknik Computer-Informatika ITS</div>
	<div class="desc">Mempelajari cara memanajemen sebuah event dalam suatu kepanitiaan.</div>
	<br>
	<div class="title"><b>Latihan Keterampilan Manajemen Mahasiswa Pra Tingkat Dasar XII FTIK (November 2019)</b></div>
	<div class="subtitle">Fakultas Teknologi Informasi dan Komunikasi ITS</div>
	<div class="desc">Mempelajari cara memanajemen diri, seperti manajemen waktu dan membuat skala prioritas.</div>
	</section>
	</div>

	<div id="kontak" class="card">
	<h2>Kontak</h2>
	<ul id="contact">
	<li class="contact-list">
	<img class="contact-image" src="assets/image/icons8-mail-96.png"/>
	<a class="contact-text" href="mailto:auliaepa@gmail.com">auliaepa@gmail.com</a>
	</li>
	<li class="contact-list">
	<img class="contact-image" src="assets/image/icons8-phone-100.png"/>
	<a class="contact-text" href="tel:+6281233110964">+62 812-3311-0964</a>
	</li>
	<li class="contact-list">
	<img class="contact-image" src="assets/image/icons8-github-90.png"/>
	<a class="contact-text" href="https://github.com/auliaaepa">auliaaepa</a>
	</li>
	<li class="contact-list">
	<img class="contact-image" src="assets/image/icons8-instagram-logo-96.png">
	<a class="contact-text" href="https://www.instagram.com/auliaaepa/">@auliaaepa</a>
	</li>
	<li class="contact-list">
	<img class="contact-image" src="assets/image/icons8-twitter-90.png"/>
	<a class="contact-text" href="https://twitter.com/auliaaepa">@auliaaepa</a>
	</li>

	</ul>
	</div>
	</main>
	</body>

	<footer>
	<p>Curriculum Vitae © 2021, AuliAAEPA</p>
	</footer>
	</html>

view raw index.html hosted with ❤ by GitHub

	@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
	* {
	box-sizing: border-box;
	}

	body {
	font-family: 'Quicksand', sans-serif;
	margin: 0;
	padding: 0;
	}

	header {
	display: inline;
	}

	main {
	padding: 20px;
	overflow: auto;
	}

	h2 {
	background-color: #00c8eb;
	color: white;
	padding: 5px 0px 5px 10px;
	}

	h3 {
	color: #00a2c6;
	}

	.card {
	padding: 10px 0px;
	clear: both;
	}

	.content {
	padding: 0px 10px;
	}

	/* NAVIGATION */
	nav {
	background-color: #00a2c6;
	top: 0px;
	padding: 5px;
	position: sticky;
	display: flex;
	}

	#user {
	float: left;
	width: 25%;
	text-align: left;
	margin: 15px 0px 0px 20px;
	}

	#navigation {
	float: right;
	width: 75%;
	text-align: right;
	}

	nav li {
	display: inline;
	list-style-type: none;
	margin-right: 20px;
	}

	nav a {
	font-size: 18px;
	font-weight: 400;
	text-decoration: none;
	color: white;
	}

	nav a:hover {
	font-weight: bold;
	}

	nav a:visited {
	color: white;
	}

	@media screen and (max-width: 800px) {
	nav {
	display: flow-root;
	overflow: hidden;
	}

	nav ul {
	padding-left: 20px;
	}

	#user,
	#navigation {
	float:left;
	width: 100%;
	text-align:left;
	}
	}

	/* TENTANG */
	#tentang .content {
	display: flex;
	}

	.bio h2 {
	color: #00a2c6;
	background-color: initial;
	padding: 0;
	}

	.intro {
	color: #00c8eb;
	}
	.photo {
	float: left;
	width: 25%;
	text-align: center;
	}

	.img-photo {
	max-height: 250px;
	object-position: center;
	}

	.bio {
	float: right;
	width: 75%;
	padding-left: 20px;
	margin-top: auto;
	margin-bottom: auto;
	}

	.bio p {
	text-align: justify;
	}

	@media screen and (max-width: 800px) {
	.photo,
	.bio {
	width: 100%;
	padding: 0px;
	margin: initial;
	}

	#tentang .content {
	display: initial;
	}
	}

	/* PENDIDIKAN */
	#pendidikan #container1{
	float: left;
	width: 50%;
	}

	#pendidikan #container2{
	float: right;
	width: 50%;
	padding-left: 20px;
	}

	#pendidikan .container-icon {
	float: left;
	}

	#pendidikan .icon {
	height: 40px;
	}

	.year {
	color: #00a2c6;
	padding: 10px 50px;
	}

	.school,
	.major {
	padding-left: 50px;
	}

	@media screen and (max-width: 800px) {
	#pendidikan #container1,
	#pendidikan #container2 {
	width: 100%;
	padding: 0px;
	}
	}

	/* PENGALAMAN */
	#pengalaman ul {
	margin: 0;
	}

	/* PELATIHAN */
	#pelatihan .desc {
	margin-left: 20px;
	}

	.container-sertif {
	text-align: center;
	}

	.sertif {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 20px;
	}

	.img-sertif{
	max-height: 200px;
	}

	.caption-sertif{
	font-size: 12px;
	font-weight: bold;
	}

	/* KONTAK */
	#kontak ul {
	padding-left: 20px;
	}

	#kontak li {
	/* display: inline; */
	list-style-type: none;
	margin-top: 10px;
	}

	#kontak img {
	vertical-align: middle;
	height: 24px;
	}

	#kontak a {
	color: black;
	text-decoration: none;
	}

	#kontak a:hover {
	font-weight: bold;
	}

	#kontak a:visited {
	color: black;
	}

	/* FOOTER */
	footer {
	padding: 20px;
	color: white;
	background-color: #00a2c6;
	text-align: center;
	font-weight: bold;
	}

view raw style.css hosted with ❤ by GitHub

Aulia

Search This Blog