Bukankanh tidak asing dengan frasa “Curriculum Vitae” atau biasa disingkat menjadi CV? Ya, tentu saja, hal tersbut merupakan salah satu bentuk personal branding kita. Nah, kali ini saya akan memberikan tahap-tahap pembuatan CV berbentuk website.
Ini merupakan tugas awal mata kuliah Pemrograman Web dimana saya akan menampilkan data personal diri saya berbasis website dengan source code di-deploy menggunakan GitHub Page. Sebenarnya saya memiliki domain fiqey.online disertai servernya, tetapi saat ini masih terdapat masalah, sehingga untuk pengerjaan tugas kali ini menggunakan GitHub Page
Berikut adalah langkah-langkah nya:
Explore Template Curriculum Vitae / Resume di BootstrapMade
Sebelum memulai, saya melakukan pencarian template yang menurut saya cocok dan terlihat elegan sebagai bentuk perconal branding saya dalam bentuk CV. Selanjutnya, saya mendownload template tersebut.
Menyunting Data dalam Template sesuai dengan Informasi Personal dan Melakukan Perubahan Tata Letak ataupun Style
Setelahnya, saya memasukkan data diri mulai dari identitas, personal experience, skills, achievement, dan beberapa projek yang pernah saya lakukan
Berikut adalah source code html yang menjadi tampilan utama website CV saya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>MyResume Bootstrap Template - Index</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|Inter|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/aos/aos.css" rel="stylesheet">
<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/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: MyResume - v4.3.0
* Template URL: https://bootstrapmade.com/free-html-bootstrap-template-my-resume/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<!-- <button type="button" class="mobile-nav-toggle d-xl-none"><i class="bi bi-list mobile-nav-toggle"></i></button> -->
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul>
<li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
<li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
<li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
<li><a href="#services" class="nav-link scrollto"><i class="bx bx-server"></i> <span>Services</span></a></li>
<li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center">
<div class="container" data-aos="zoom-in" data-aos-delay="100">
<h1>Fiqey Indriati Eka Sari</h1>
<p>I'm <span class="typed" data-typed-items="Developer, Freelancer, Designer"></span></p>
<div class="social-links">
<a href="https://www.facebook.com/fiqey.indriati/" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="https://instagram.com/fiqey08" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="https://www.linkedin.com/in/fiqey-indriati-eka-sari-563443126/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a href="https://github.com/finesaaa" class="github"><i class="bx bxl-github"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2 class="spacing-loose">About</h2>
<p>Experienced Software Engineer with a demonstrated history of working in the research industry. Skilled in Design, User Experience (UX), User Interface Design, and Public Speaking.</p>
</div>
<div class="row">
<div class="col-lg-3">
<img src="assets/img/profile-img.jpeg" class="img-fluid px-25" alt="">
</div>
<div class="col-lg-9 pt-4 pt-lg-0 content">
<!-- <h3>UI/UX Designer & Web Developer.</h3> -->
<!-- <p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p> -->
<div class="row pb-25">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>16 August 2001</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong> <span>fiqey.link</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>(62)812 5288 7181</span></li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>20 years</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Occupation:</strong> <span>Undergraduate Student</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Email:</strong> <span>indriatfiqey16@gmail.com</span></li>
</ul>
</div>
</div>
<p>
Strong engineering professional with a Undergraduate Student focused in Informatics Engineering from Institut Teknologi Sepuluh Nopember.
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Facts Section ======= -->
<section id="facts" class="facts">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2 class="spacing-loose">Facts</h2>
<p>Curious in multidisciplinary fields to integrate technology - particularly Artificial Intelligence, life sciences, and social.</p>
</div>
<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="3" 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="3" class="purecounter"></span>
<p>Licenses & certifications</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="9" data-purecounter-duration="3" class="purecounter"></span>
<p>Honors & Awards</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="bi bi-display"></i>
<span data-purecounter-start="0" data-purecounter-end="3" data-purecounter-duration="3" class="purecounter"></span>
<p>Experiences</p>
</div>
</div>
</div>
</div>
</section><!-- End Facts Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2 class="spacing-loose">Skills</h2>
<!-- <p>Skilled in many .</p> -->
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">HTML <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">CSS <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">Computer Vision <i class="val">55%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills 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">Volunteer experience</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>MyITS StudentAffairs</h4>
<h5>2021 - 2021</h5>
<p><em>Fullstack Developer</em></p>
<ul>
<li>Developed numerous features such as apply scholarship, manage scholarshp document, cross check, etc.</li>
<li>Using Laravel Framework</li>
<li>Created user interface and user experience of this website</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2 class="spacing-loose">Portfolio</h2>
<p>I have started many projects but not all of them have been finished nor worth published.</p>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-web">Web</li>
<li data-filter=".filter-ro">Web</li>
</ul>
</div>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<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" class="portfolio-details-lightbox" data-glightbox="type: external" 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.jpg" 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.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="portfolio-details-lightbox" data-glightbox="type: external" 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.png" 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.png" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="portfolio-details-lightbox" data-glightbox="type: external" 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.png" 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.png" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="portfolio-details-lightbox" data-glightbox="type: external" 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-4.png" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 3</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-4.png" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="portfolio-details-lightbox" data-glightbox="type: external" 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-9.jpg" 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-9.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="portfolio-details-lightbox" data-glightbox="type: external" 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" data-aos="fade-up">
<div class="section-title">
<h2 class="spacing-loose">Contact</h2>
</div>
<div class="row mt-1">
<div class="col-lg-4">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>Pasuruan, East Java 67151</p>
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>indriatifiqey16@gmail.com</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>(62)812 5288 7181</p>
</div>
</div>
</div>
<div class="col-lg-8 mt-5 mt-lg-0">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<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>
</div>
</div>
</section><!-- End Contact Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<h3>Fiqey Indriati</h3>
<p>If you have some project that would like to involve me or you want to recruit me on your team, feel free to contact me.</p>
<div class="social-links">
<a href="https://www.facebook.com/fiqey.indriati/" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="https://instagram.com/fiqey08" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="https://www.linkedin.com/in/fiqey-indriati-eka-sari-563443126/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a href="https://github.com/finesaaa" class="github"><i class="bx bxl-github"></i></a>
</div>
<div class="copyright">
© Copyright <strong><span>MyResume</span></strong>. All Rights Reserved
</div>
<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: [license-url] -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-html-bootstrap-template-my-resume/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/typed.js/typed.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>Menampilkan Source Code Menjadi Tampilan di GitHub Page
Agar website dapat diakses publik maka salah satu solusinya dengan menggunakan GitHub Page
- Membuat repository yang berisi source website CV yang sebelumnya telah dibuat
- Selanjutnya untu 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://finesaaa.github.io/cv-fiqey/
Fiqey Indriati Eka Sari
05111940000015
PWEB-D
Fiqey Indriati Blog 