Langsung ke konten utama

Belajar Web Ceria 1

Membuat Website CV Pribadi

Programmer wajib memiliki Website CV

Sebagai seorang programmer, memiliki sebuah website pribadi untuk digunakan sebagai CV (curriculum vitae) sangatlah penting untuk menunjang karir. Baik itu berupa web statis ataupun dinamis. Pembuatan website CV juga bisa menjadi portofolio pribadi yang dapat ditunjukkan saat melamar pekerjaan. Maka dari itu, aku akan berbagi sedikit ilmu ke kisanak dalam membuat website CV.

Konten

Dalam Website CV sebaiknya mencakup beberapa konten yang sama layaknya sebuah cv pada umumnnya. Pada websiteku, konten yang aku pakai antara lain:
  1. Profil diri (nama, TTL, nomor HP, email)
  2. Bahasa pemrograman yang dikuasai
  3. Hasil project yang pernah dibuat. baik dari tugas kuliah ataupun proyek dengan client
  4. Media sosial
disini aku menambahkan juga tempat untuk podcastku, ya sekalian promosi podcast.

Pada web ini, aku menggunakan HTML, CSS, Javascript yang dibantu dengan Bootsrap dan Canva & avataaars untuk bagian asetnya.






HTML

HTML akan menjadi kerangka/pondasi dari website. HTML pada web ini menghasilkan 600++ line, sehingga cukup panjang dan menurutku cukup sulit jika ingin memeriksa bagian tertentu, maka aku akan membaginya jadi 4 bagian yaitu:
  1. index : menjadi kerangka utama dari HTML
  2. portfolio : bagian yang menampilkan aset yang berhubungan dengan portfolio
  3. models : bagian yang menampilkan informasi detail dari aset portfolio, tersambung dengan javascript
  4. footer : bagian footer dari website, berisi lokasi pembuatan, copyright dan sosial media yang bisa dikunjungi
Cara untuk menyambungkan setiap file .HTML ini menggunakan script yang dibuat oleh w3school yaitu includeHTML. Web ini dibuat dengan didominasi warna gelap, soalnya nyaman dimata sih hehe

Index.HTML

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Core theme CSS (includes Bootstrap)-->
<link rel="stylesheet" href="assets/fontawesome-free-5.8.1-web/fontawesome-free-5.8.1-web/css/all.css"/>
<link href="css/styles.css" rel="stylesheet"/>
<link href="css/custom.css" rel="stylesheet"/>
<!-- <link href="css/all.css" rel="stylesheet"/> -->
<link rel="icon" type="image/x-icon" href="assets\notebook.png"/>
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- linkedin -->
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"/>
<title>Portofolio - Thomas Dwi</title>
</head>
<body id="page-top" class="bg-secondary">
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> -->
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<!-- Content here -->
<a href="#page-top" title="Home" class="navbar-brand js-scroll-trigger">Welcome, Kisanak!</a>
<button
title="Toggle Navbar"
class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
> Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1">
<a
title="Go to Thomas's Resume"
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#profile"
>Profile</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
title="Go to Thomas's Portofolio"
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#portfolio"
>Portfolio</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
title="About Thomas"
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#about"
>About Me</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
title="Listen an episode now"
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#podcast"
>Podcast</a
>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a
title="Contact Thomas Dwi Awaka"
class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#contact"
>Contact</a
>
</li>
</ul>
</div>
</nav>
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Avatar Image-->
<img title="Tom's Avatar" class="mb-5" src='https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortWaved&accessoriesType=Blank&hairColor=Black&facialHairType=BeardLight&facialHairColor=Black&clotheType=BlazerShirt&eyeType=Surprised&eyebrowType=RaisedExcitedNatural&mouthType=Eating&skinColor=Tanned'/>
<!-- Masthead Heading-->
<h1 class="masthead-heading text-uppercase mb-0">Thomas Dwi Awaka</h1>
<br>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading-->
<p class="masthead-subheading font-weight-light mb-0 ">
I'm a
<h4 class="typewrite " data-period="1000" data-type='[ "Programmer", " Junior Web Developer", "Quality Assuerance", "Podcaster" ]'>
<span class="wrap"></span>
</h4>
</p>
</div>
</header>
<!-- profile -->
<section class="page-section resume " id="profile">
<div class="container px-4">
<h2 class="page-section-heading text-center text-uppercase text-white mb-0">Profile</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- profile Content -->
<div class="row">
<div class="col-lg-4 ml-4">
<p class="lead text-center">
<img title="Thomas Dwi Awaka" class="img-fluid" src="assets/img/Tom_baju_bebas.jpg" alt="Thomas's pict" />
</p>
</div>
<div class="col-lg-8 mr-auto">
<h2 class="mt-5 text-white">Thomas Dwi Awaka</h2>
<p class="lead lead-blue text-white">
Someone who is always busy to develop himself
</p>
<ul class="list-group list-group-flush ">
<li class="list-group-item list-group-item-dark text-white">
<i class="fas fa-birthday-cake mr-2"></i> Bontang, 23 September 2000
</li>
<li class="list-group-item list-group-item-dark text-white">
<i class="fas fa-map-marker-alt"></i> Bontang, Indonesia
</li>
<li class="list-group-item list-group-item-dark text-white">
<i class="fas fa-mobile-alt"></i> 085247944248
</li>
<li class="list-group-item list-group-item-dark text-white">
<i class="fas fa-envelope"></i> mastomcsc23@gmail.com
</li>
<li class="list-group-item list-group-item-dark text-white">
<i class="fas fa-code"></i> Prolog, Java, C/C++, HTML, CSS, JavaScript, SQL, and Python
</li>
</ul>
</div>
</div>
<!-- Resume Content Bottom -->
<div class="text-center mt-4">
<a
title="Go to Thomas's Full Resume"
class="btn btn-xl btn-outline-info"
target="_blank"
href="https://doc-0s-90-docs.googleusercontent.com/docs/securesc/21g2v60dr1fk3b7puao90du9ib5h8tqv/2ekp3b3m0sas65im3d2t9163jvv3j126/1630925775000/06122035603326800546/06122035603326800546/1DhWh7gKIkK2_9b6DF1jq4pu7aik1_f6t?e=download&authuser=0&nonce=gt4n34ant09ma&user=06122035603326800546&hash=ov8pbn7sobub1che7s2h38488sbu1uft">
See Full CV &rarr;
</a>
</div>
</div>
</section>
<div w3-include-html="layouts\include\portfolio.html"></div>
<!-- About Section-->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white">About Me</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content-->
<div class="row">
<div class="col-lg-4 ms-auto"><p class="lead">As an overseas student, my life has a motto that is “non scholæ sed vitæ discimus” which means “We learn not for school but of life”. I aspire to be a lecturer in my hometown</p></div>
<div class="col-lg-4 me-auto"><p class="lead">Currently I'm interested in Machine Learning, Quality Assurance, website development. Of course it's not easy to learn everything, but I always try</p></div>
</div>
</div>
</section>
<!-- Podcast section -->
<section class="page-section" id="podcast">
<div class="container">
<!-- Contact Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white">Listen & Chill</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light pb-5">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<iframe src="https://open.spotify.com/embed/episode/28Yl3uSnWsoiidEGIlf4cL" width="100%" height="232" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="text-center mt-4 d-flex justify-content-evenly">
<a title="See My Podcast" class="btn btn-xl btn-outline-info mb-3" target="_blank" href="https://open.spotify.com/show/3lpZRMMvK2L035WlaLeDBH?si=S2PUqf2TT0-ehzA3Fp6aJA&dl_branch=1">
See all Episodes of Podcast Dostip
</a>
<a title="Support Me!" class="btn btn-xl btn-outline-info mb-3" target="_blank" href="https://saweria.co/Tomking">
Support Me, please😘
</a>
</div>
</section>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
<div class="scroll-to-top d-lg-none position-fixed">
<a
title="Go Up"
class="js-scroll-trigger d-block text-center text-white rounded"
href="#page-top"
><i class="fa fa-chevron-up"></i
></a>
</div>
<div w3-include-html="layouts\include\footer.html"></div>
<div w3-include-html="layouts\include\models.html"></div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script>includeHTML();</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

portfolio.HTML

<!-- Portfolio Modals-->
<!-- Portfolio Modal 1-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Detector-19</h2>
<!-- Icon Divider-->
<div class="divider-custom ">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/detector-19.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4 text-black">expert system for diagnosis of possible infection by the COVID-19 virus using SWI prolog.</p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<a class="text-white" style="text-decoration: none;" href="https://github.com/Misdinar/Detector-19" target="_blank">Try Detector-19 Now!</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" aria-labelledby="portfolioModal2" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">E-sertifikasi Kominfo 2021</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/esertifikasi.PNG" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Updating the old website from the Direktorat Jenderal Sumber Daya dan Perangkat Pos dan Informatika. Now named e-certification new generation</p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<a class="text-white" style="text-decoration: none;" href="https://sertifikasi.postel.go.id/" target="_blank">Visit Now!</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" aria-labelledby="portfolioModal3" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Hand Classification</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/klasifkasi tangan.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">A simple Machine Learning to classify hand drawings (scissors, rock, paper) A Final Project of Machine Learning Class for Beginners by Dicoding Indonesia</p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<a class="text-white" style="text-decoration: none;" href="https://github.com/Misdinar/Klasifikasi-Gambar-Tangan" target="_blank">Try it with your own hand!</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 4-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" aria-labelledby="portfolioModal4" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Controller</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/program twibboner.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Applications for Making Twibbons and Podcast Covers</p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<a class="text-white" style="text-decoration: none;" href="https://github.com/Misdinar/Twibboner_V1" target="_blank">Try it now!</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
view raw portfolio.hmtl hosted with ❤ by GitHub

models.HTML

<section class="page-section portfolio " id="portfolio">
<div class="container">
<!-- Portfolio Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white mb-0">Portfolio</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Grid Items-->
<div class="row justify-content-center">
<!-- Portfolio Item 1-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="assets/img/portfolio/detector-19.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 2-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal2">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/konsultan.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 3-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal3">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/klasifkasi.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 4-->
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal4">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/twibboner.png" alt="..." />
</div>
</div>
</div>
</div>
</section>
view raw models.html hosted with ❤ by GitHub

footer.HTML

view raw footer.hmtl hosted with ❤ by GitHub

CSS

Untuk bagian CSS-nya menggunakan default dari boostrap, yaitu styles.css. Akan tetapi, aku tambahkan beberapa modifikasi warna, agar sesuai dengan modifikasi dark mode.

custom.CSS

:root{
--bs-secondary-rgb: 20, 40, 80;
--bs-green: #198754;
}
.show {
display: block;
}
.preview{
width: 20em;
}
.list-group-item-dark{
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-secondary-dark{
background-color: #0C7B93;
}
.btn-outline-info{
color:white;
}
.btn-outline-info:hover{
color:white;
background-color: #1abc9c;
border-color: #1abc9c;
}
.typewrite { color:#fff; text-decoration: none;}
view raw custom.css hosted with ❤ by GitHub

Javascript

Penggunaan java script ini untuk membuat website statis ini lebih "hidup". seperti topbar yang dapat mengecil jika di-scroll kebawah, menampilkan animasi kalimat yang diketik, cara menampilkan detail dari portfolio, dan fungsi untuk menghubungkan setiap file .HTML ke index.html.

scripts.js

/*!
* Start Bootstrap - Freelancer v7.0.4 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
//
// Scripts
//
window.addEventListener('DOMContentLoaded', event => {
// Navbar shrink function
var navbarShrink = function () {
const navbarCollapsible = document.body.querySelector('#mainNav');
if (!navbarCollapsible) {
return;
}
if (window.scrollY === 0) {
navbarCollapsible.classList.remove('navbar-shrink')
} else {
navbarCollapsible.classList.add('navbar-shrink')
}
};
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav element
const mainNav = document.body.querySelector('#mainNav');
if (mainNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#mainNav',
offset: 72,
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap {border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
view raw scripts.js hosted with ❤ by GitHub

kalian bisa langsung melihat websitenya di close2tom.com dan untuk repositorynya di GitHubku

Referensi:



Label

Labels:
Location: 4FMH+PH5, Gn. Elai, Bontang Utara, Kota Bontang, Kalimantan Timur 75325, Indonesia

Komentar

  1. Anonim23 Januari 2022 pukul 12.55

    Baccarat | FEBCASINO
    Learn how to play Baccarat and win real money at FEBCASINO - the casino 카지노 with the best live dealers! Find the best blackjack games, クイーンカジノ get free spins and more! 바카라사이트

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Belajar Java Ceria 5

Game The world-of-zuul      Halo kisnak, kali ini aku akan membuat sebuah project kecil yang dibuat berdasarkan buku Object First With Java. Game ini sebenarnya bertipe adventure, tapi ya biasa aja dan membosankan. Akan tetapi, ini bisa menjadi implementasi untuk Designing Classes. Terdapat 5 kelas pada project ini, yaitu: ■ CommandWords - Kelas CommandWords mendefinisikan semua Command yang valid dalam permainan (go, help, quit). Ini dilakukan dengan menyimpan array objek String yang mewakili kata-kata perintah. ■ Parser  - Parser membaca baris input dari terminal dan mencoba menafsirkannya sebagai Command. Ini membuat objek dari Class Command yang mewakili perintah itu masuk. ■ Command  - Sebuah objek perintah mewakili perintah yang dimasukkan oleh pengguna. Ini memiliki metode yang memudahkan kita untuk memeriksa apakah ini adalah perintah yang valid dan untuk mendapatkan kata pertama dan kedua dari perintah tersebut sebagai string terpisah. ■ Room - Objek ...
Posting Komentar
Read more »

Belajar Java Ceria 4

Technical Support System Sederhana     Sebuah Technical Support System yang sesungguhnya pasti memakai bot didalamnya, dan itu perlu ilmu yang lebih tinggi karena merupakan salah satu contoh aplikasi kognitif dan penerapan AI. Tapi kali ini aku akan buat yang versi sederhana saja berdasarkan buku Objects First With Java bab 5 bagian 5.2. Jadi dibuku sudah dibuat program dasarnya,  yang betul-betul simpel banget dan biasa aja. Nah disini aku sedikit modifikasi agar sistem ini terlihat lebih "hidup". Jadi berikut ini Class dari programnya, dan sudah kubuat dokumentasi singkat didalamnya InputReader Responder supportSystem mainSupportSystem Ini akan jadi main program yang akan menjalankan seluruh Class di atas Dan berikut ini salah satu output yang dapat diberikan Kalian bisa kok menggunakan kode diatas dan membuat variasi yang lebih menarik dari ini. Mantap, Rispek!!✌
Posting Komentar
Read more »

Belajar Java Ceria 3

 Grouping Object      Kali ini aku akan mencoba implementasi sederhana tentang grouping object dengan Collection serta membuat Sistem lelang sangat sederhana  Java Collection Java Collection secara sederhana merupakan sebuah objek. Collectionadalah framework yang menyediakan tempat untuk menyimpan dan memanipulasi sekumpulan objek. framework ini dapat melakukan pencarian, pengurutan, memasukan data dan menghapus. Collection menyediakan berbagai interface seperti Set, List, Queue, Dequeue dan untuk class-nya antara lain, ArrayList, Vector, Linked List, dll.  ArrayList Contoh ArrayList ini memakai iterasi while Contoh ArrayList dengan For-Each Loop ini memakai iterasi for Contoh ArrayList dan Class Data Disini perlu dibuat dulu Class Mahasiswa, bisa seperti ini Dan Seperti ini Class dari ArrayListnya Contoh Memakai addAll di ArrayList Contoh Memakai RemoveAll di ArrayList Contoh Memakai RetainAll di ArrayList Demikian berbagai contoh pengunaan Arraylist. Lal...
3 komentar
Read more »