Berikut adalah dokumentasi pengerjaan tugas awal mata kuliah Pemrograman Web dimana saya akan menampilkan data personal diri saya berbasis website dengan source code di-deploy dalam Github Page.
Berikut adalah langkah-langkah nya:
Mencari Template CV di BootstrapMade
Saya mencari template yang menurut saya terlihat elegan sebagai CV saya., yaitu Template dari Emily Jones. Lalu, saya mengunduh template tersebut.
Mengubah Data Identitas, Informasi Lainnya, Tata Letak, dan Style
Berikutnya saya input data diri seperti identitas, skill yang saya miliki, dan beberapa projek yang pernah saya buat.
Berikut adalah source code html yang menjadi tampilan CV website saya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Personal Bootstrap Template</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Personal - v4.3.0
* Template URL: https://bootstrapmade.com/personal-free-resume-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
<div class="container">
<h1><a href="index.html">Muchamad Maroqi Abdul Jalil</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="mr-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a> -->
<h2>I'm passionate with <span>Android and Web programming</span></h2>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link active" href="#header">Home</a></li>
<li><a class="nav-link" href="#about">Profil</a></li>
<li><a class="nav-link" href="#resume">Resume</a></li>
<!-- <li><a class="nav-link" href="#services">Services</a></li> -->
<li><a class="nav-link" href="#portfolio">Portfolio</a></li>
<!-- <li><a class="nav-link" href="#contact">Contact</a></li> -->
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<div class="social-links">
<a href="https://github.com/maroqijalil" class="github"><i class="bi bi-github"></i></a>
<a href="https://www.instagram.com/maroqi.jalil/" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="https://www.linkedin.com/in/muchamad-maroqi-abdul-jalil-7b3055196/" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</header><!-- End Header -->
<!-- ======= About Section ======= -->
<section id="about" class="about">
<!-- ======= About Me ======= -->
<div class="about-me container">
<div class="section-title">
<h2>About</h2>
<p>Learn more about me</p>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-right">
<img src="assets/img/profile-image.png" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
<h3>Fullstack Developer & Robotic Anthusiast</h3>
<p class="fst-italic">
I have been learn and develop programs all for myself.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>8 November 2000</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong> <span>maroqi.online</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>+62 877 7310 6971</span></li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>21</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Occupance:</strong> <span>An Undergraduate Student</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Email:</strong> <span>jalilpro@gmail.com</span></li>
</ul>
</div>
</div>
<p>
Able to develop Android and Web Application. Skilled in C/C++, Python, ReactJS, and know the basics of other programming language.
</p>
</div>
</div>
</div><!-- End About Me -->
<!-- ======= Counts ======= -->
<div class="counts container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="bi bi-emoji-smile"></i>
<span data-purecounter-start="0" data-purecounter-end="4" data-purecounter-duration="1" class="purecounter"></span>
<p>Projects</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-md-0">
<div class="count-box">
<i class="bi bi-journal-richtext"></i>
<span data-purecounter-start="0" data-purecounter-end="6" data-purecounter-duration="1" class="purecounter"></span>
<p>Achievement</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="bi bi-headset"></i>
<span data-purecounter-start="0" data-purecounter-end="9" data-purecounter-duration="1" class="purecounter"></span>
<p>License and Certificates</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="bi bi-award"></i>
<span data-purecounter-start="0" data-purecounter-end="2" data-purecounter-duration="1" class="purecounter"></span>
<p>Experiences</p>
</div>
</div>
</div>
</div><!-- End Counts -->
<!-- ======= Skills ======= -->
<div class="skills container">
<div class="section-title">
<h2>Skills</h2>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">Android Development <i class="val">95%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Web Development <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">JavaScript <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">PHP <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">C/C++ <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">ReactJS <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div><!-- End Skills -->
</section><!-- End About Section -->
<!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2 class="spacing-loose">Resume</h2>
<p>I also in some other things like event organization, project, lab research, and competition.</p>
</div>
<div class="row">
<div class="col-lg-6">
<h3 class="resume-title">Education</h3>
<div class="resume-item">
<h4>Bachelor of & Computer Science</h4>
<h5>2019 - Present</h5>
<p><em>Sepuluh Nopember Institute of Technology (ITS)</em></p>
<p>I learn in the field of web programming, mobile programming, networking, machine learning, and computer vision.</p>
</div>
<div class="resume-item">
<h4>Winter Program & Artificial Intelligence</h4>
<h5>2021 - 2021</h5>
<p><em>Asia University (TW)</em></p>
<p>I learn about deep learning, image processing, and natural language processing (NLP)</p>
</div>
<!-- <h3 class="resume-title">Organization</h3>
<div class="resume-item pb-0">
<h4>Scratch MIT Programming Teacher</h4>
<h5>2021 - 2021</h5>
<p><em>Deliver programmng course to elemantary student using tools Scratch.</em></p>
<p>Collaboration with SD Al Hikmah's Coding Extracurricular by Sekolah Robot Indonesia</p>
</div> -->
</div>
<div class="col-lg-6">
<h3 class="resume-title">Professional Experience</h3>
<div class="resume-item">
<h4>ICHIRO ITS Robotics Team</h4>
<h5>2019 - Present</h5>
<p><em>Programmer </em></p>
<ul>
<li>This team has a main project to build humanoid robots that could compete in international competition.</li>
<li>Learn computer vision and develop the robot framework </li>
<li>Using C/C++, Python, and also trying ROS2</li>
</ul>
</div>
<div class="resume-item">
<h4>PPDB Surabaya Web</h4>
<h5>2021 - 2021</h5>
<p><em>Fullstack Developer</em></p>
<ul>
<li>Developed numerous features such as apply school registration, school verification, etc.</li>
<li>Using React-Laravel Framework</li>
<li>Created UI/UX and back-end of this website</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="section-title">
<h2>Portfolio</h2>
<p>My Works</p>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-robotics">Robotics</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div class="row portfolio-container">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.png" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-1.png" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 1"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external" class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.png" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-2.png" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external" class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<!-- <div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 2</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external" class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div> -->
<div class="col-lg-4 col-md-6 portfolio-item filter-robotics">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-5.jpeg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Robotics</h4>
<p>Robotics</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-5.jpeg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Robotics 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external" class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<!--
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Web 2</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" data-gallery="portfolioDetailsGallery" data-glightbox="type: external" class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div> -->
</div>
</div>
</section><!-- End Portfolio Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>Contact Me</p>
</div>
<div class="row mt-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-map"></i>
<h3>My Address</h3>
<p>Nganjuk, East Java</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-share-alt"></i>
<h3>Social Profiles</h3>
<div class="social-links">
<a href="https://github.com/maroqijalil" class="github"><i class="bi bi-github"></i></a>
<a href="https://www.instagram.com/maroqi.jalil/" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="https://www.linkedin.com/in/muchamad-maroqi-abdul-jalil-7b3055196/" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-envelope"></i>
<h3>Email Me</h3>
<p>jalilpro31@gmail.com</p>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-phone-call"></i>
<h3>Call Me</h3>
<p>+62 877 7310 6971</p>
</div>
</div>
</div>
<form action="forms/contact.php" method="post" role="form" class="php-email-form mt-4">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</section><!-- End Contact Section -->
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/personal-free-resume-bootstrap-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
<!-- Vendor JS Files -->
http://assets/vendor/bootstrap/js/bootstrap.bundle.min.js
http://assets/vendor/glightbox/js/glightbox.min.js
http://assets/vendor/isotope-layout/isotope.pkgd.min.js
http://assets/vendor/php-email-form/validate.js
http://assets/vendor/purecounter/purecounter.js
http://assets/vendor/swiper/swiper-bundle.min.js
http://assets/vendor/waypoints/noframework.waypoints.js
<!-- Template Main JS File -->
http://assets/js/main.js
</body>
</html>Deploy CV Website Menggunakan GitHub Page
Agar website dapat diakses publik maka salah satu alternatifnya dengan menggunakan GitHub Page. Sebenarnya saya memiliki server dan domain yang akan digunakan, namun terdapat masalah di server. Jadi untuk sementara pengerjaan tugas ini saya deploy di Github Page. Selanjutnya akan berada di maroqi.online
- Membuat repository dan mengisi repository tersebut dengan folder yang berisi source website CV yang sebelumnya telah dibuat
- Selanjutnya deploy menggunakan GitHub Page, menuju menu setting pada repository yang telah dibuat. Lalu, memilih menu Pages dan menggunakan branch yang akan di deploy (master). Langkah berikutnya, save.
- Halaman CV Website telah terdeploy dan dapat dilihat pada link berikut https://maroqijalil.github.io/cv-maroqi/
Muchamad Maroqi Abdul Jalil
05111940000143 / PWEB-D
Maroqi Jalil Blog 