<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="copyright" content="eFBe, https://nogino.my.id/"> <title>Virtual Folio - Portfolio HTML5 Template</title> <link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="stylesheet" type="text/css" href="assets/css/themify-icons.css"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css"> <link rel="stylesheet" type="text/css" href="assets/vendor/owl-carousel/owl.carousel.css"> <link rel="stylesheet" type="text/css" href="assets/vendor/perfect-scrollbar/css/perfect-scrollbar.css"> <link rel="stylesheet" type="text/css" href="assets/vendor/nice-select/css/nice-select.css"> <link rel="stylesheet" type="text/css" href="assets/vendor/fancybox/css/jquery.fancybox.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/virtual.css"> <link rel="stylesheet" type="text/css" href="assets/css/minibar.virtual.css"> </head> <body class="theme-red"> <!-- Back to top button --> <div class="btn-back_to_top"> <span class="ti-arrow-up"></span> </div> <!-- Setting button <div class="config"> <div class="template-config"> <div class="d-block"> <button class="btn btn-fab btn-sm" id="sideel" title="Settings"><span class="ti-settings"></span></button> </div> <div class="d-block"> <a href="https://macodeid.com/projects/virtual-folio/" class="btn btn-fab btn-sm" title="Get this template" data-toggle="tooltip" data-placement="left"><span class="ti-download"></span></a> </div> <div class="d-block"> <a href="#" class="btn btn-fab btn-sm" title="Help" data-toggle="tooltip" data-placement="left"><span class="ti-help"></span></a> </div> </div> <div class="set-menu"> <p>Select Color</p> <div class="color-bar" data-toggle="selected"> <span class="color-item bg-theme-red selected" data-class="theme-red"></span> <span class="color-item bg-theme-blue" data-class="theme-blue"></span> <span class="color-item bg-theme-green" data-class="theme-green"></span> <span class="color-item bg-theme-orange" data-class="theme-orange"></span> <span class="color-item bg-theme-purple" data-class="theme-purple"></span> </div> <select class="custom-select d-block my-2" id="change-page"> <option value="">Choose Page</option> <option value="index">Topbar</option> <option value="blog-topbar">Blog (Topbar)</option> <option value="index-2">Minibar</option> <option value="blog-minibar">Blog (Minibar)</option> </select> </div> </div> --> <!-- Minibar --> <div class="minibar"> <div class="header"> <div class="brand"> </div> </div> <div class="content"> <ul class="main-menu"> <li class="menu-item active"> <a href="#home" class="menu-link"> <span class="icon ti-home"></span> <span class="caption">Home</span> </a> </li> <li class="menu-item"> <a href="#about" class="menu-link"> <span class="icon ti-user"></span> <span class="caption">About</span> </a> </li> <li class="menu-item"> <a href="#services" class="menu-link"> <span class="icon ti-file"></span> <span class="caption">Service</span> </a> </li> <li class="menu-item"> <a href="#portfolio" class="menu-link"> <span class="icon ti-briefcase"></span> <span class="caption">Portfolio</span> </a> </li> <li class="menu-item"> <a href="#blog" class="menu-link"> <span class="icon ti-book"></span> <span class="caption">Blog</span> </a> </li> <li class="menu-item"> <a href="#contact" class="menu-link"> <span class="icon ti-location-pin"></span> <span class="caption">Contact</span> </a> </li> </ul> </div> </div> <div class="vg-main-wrapper"> <div class="vg-page page-home" id="home" style="background-image: url(assets/img/bg_image_2.jpg);"> <div class="caption wow zoomInUp"> <h1 class="fw-normal">Welcome</h1> <h2 class="fw-medium fg-theme">I'm Fiky Baharudin</h2> <p class="tagline">Developer</p> </div> </div> <!-- Page About --> <div class="vg-page page-about" id="about"> <!-- Profile --> <div class="container py-3"> <div class="row"> <div class="col-md-6"> <div class="img-place wow zoomIn"> <img src="assets/img/person.jpg" alt="Photo Profile"> </div> </div> <div class="col-md-6"> <div class="caption wow fadeInRight"> <h2 class="fg-dark">Fiky Baharudin</h2> <p class="fg-theme fw-medium">Developer</p> <p>Still Learning</p> <ul class="theme-list"> <li class="fg-dark"><b>From:</b> Malang, East Java, ID</li> <li class="fg-dark"><b>Lives In:</b> Jember, East Java, ID</li> <li class="fg-dark"><b>Age:</b> 22</li> <li class="fg-dark"><b>Gender:</b> Male</li> </ul> <button class="btn btn-theme btn-rounded">Download CV</button> </div> </div> </div> </div> <!-- End profile --> <!-- Skills --> <div class="container mt-5"> <h1 class="text-center fg-dark wow fadeInUp">My Skills</h1> <div class="row py-3"> <div class="col-md-6"> <h4 class="wow fadeInUp">Coding skills</h4> <div class="progress-wrapper wow fadeInUp"> <span class="caption">JavaScript</span> </div> <div class="progress-wrapper wow fadeInUp"> <span class="caption">PHP</span> </div> <div class="progress-wrapper wow fadeInUp"> <span class="caption">HTML + CSS</span> </div> <div class="progress-wrapper wow fadeInUp"> <span class="caption">Phyton</span> </div> </div> <div class="col-md-6"> <h4 class="wow fadeInUp">Dev Skills</h4> <div class="progress-wrapper wow fadeInUp"> <span class="caption">Linux</span> </div> <div class="progress-wrapper wow fadeInUp"> <span class="caption">Docker</span> </div> <div class="progress-wrapper wow fadeInUp"> <span class="caption">Networking</span> </div> </div> </div> </div> <!-- End skills --> <!-- Resume --> <div class="container pt-5"> <div class="row"> <div class="col-md-6 wow fadeInRight"> <h2 class="fg-dark">Education</h2> <ul class="timeline mt-4 pr-md-5"> <li> <div class="title">2019 - Current</div> <div class="details"> <h5>Sistem Informasi</h5> <small class="fg-theme">Universitas Terbuka</small> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered</p> </div> </li> <li> <div class="title">2015 - 2018</div> <div class="details"> <h5>Specialize of course</h5> <small class="fg-theme">University of Study</small> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered</p> </div> </li> </ul> </div> <div class="col-md-6 wow fadeInRight" data-wow-delay="200ms"> <h2 class="fg-dark">Experience</h2> <ul class="timeline mt-4 pr-md-5"> <li> <div class="title">2017 - Current</div> <div class="details"> <h5>Specialize of course</h5> <small class="fg-theme">University of Study</small> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered</p> </div> </li> <li> <div class="title">2014</div> <div class="details"> <h5>Specialize of course</h5> <small class="fg-theme">University of Study</small> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered</p> </div> </li> <li> <div class="title">2011</div> <div class="details"> <h5>Specialize of course</h5> <small class="fg-theme">University of Study</small> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered</p> </div> </li> </ul> </div> </div> </div> <!-- End resume --> </div> <!-- End page about --> <!-- Page Service --> <div class="vg-page page-service" id="services"> <h1 class="text-center wow fadeInUp">Services</h1> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card card-body"> <div class="iconic"> <span class="ti-layout"></span> </div> <h4 class="fg-theme">Web Design</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <a href="#" class="btn btn-theme btn-rounded">Read More</a> </div> </div> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card card-body"> <div class="iconic"> <span class="ti-announcement"></span> </div> <h4 class="fg-theme">SEO</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <a href="#" class="btn btn-theme btn-rounded">Read More</a> </div> </div> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card card-body"> <div class="iconic"> <span class="ti-desktop"></span> </div> <h4 class="fg-theme">Web Development</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <a href="#" class="btn btn-theme btn-rounded">Read More</a> </div> </div> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card card-body"> <div class="iconic"> <span class="ti-layout"></span> </div> <h4 class="fg-theme">Web Design</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <a href="#" class="btn btn-theme btn-rounded">Read More</a> </div> </div> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card card-body"> <div class="iconic"> <span class="ti-announcement"></span> </div> <h4 class="fg-theme">SEO</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <a href="#" class="btn btn-theme btn-rounded">Read More</a> </div> </div> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card card-body"> <div class="iconic"> <span class="ti-desktop"></span> </div> <h4 class="fg-theme">Web Development</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <a href="#" class="btn btn-theme btn-rounded">Read More</a> </div> </div> </div> </div> </div> <!-- End page services --> <!-- Testimonials --> <div class="vg-page p-0" id="testimonial"> <div class="owl-carousel testi-carousel" style="background-image: url(assets/img/photo-2.jpg);"> <div class="item"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, dicta atque. Voluptas illum quasi asperiores autem unde cupiditate temporibus quisquam iste rem dignissimos. Commodi placeat, quis omnis inventore asperiores sit.</p> <span class="iconic"> <span class="ti-quote-left"></span> </span> <h4>Andrew Johanson</h4> </div> <div class="item"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, dicta atque. Voluptas illum quasi asperiores autem unde cupiditate temporibus quisquam iste rem dignissimos. Commodi placeat, quis omnis inventore asperiores sit.</p> <span class="iconic"> <span class="ti-quote-left"></span> </span> <h4>Louis Herreira</h4> </div> <div class="item"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, dicta atque. Voluptas illum quasi asperiores autem unde cupiditate temporibus quisquam iste rem dignissimos. Commodi placeat, quis omnis inventore asperiores sit.</p> <span class="iconic"> <span class="ti-quote-left"></span> </span> <h4>Patrice Clark</h4> </div> </div> </div> <!-- End testimonial --> <!-- Portfolio page --> <div class="vg-page page-portfolio" id="portfolio"> <div class="container"> <div class="text-center wow fadeInUp"> <div class="badge badge-subhead">Portfolio</div> </div> <h1 class="text-center fw-normal wow fadeInUp">See my work</h1> <div class="filterable-button py-3 wow fadeInUp" data-toggle="selected"> <button class="btn btn-theme-outline selected" data-filter="*">All</button> <button class="btn btn-theme-outline" data-filter=".apps">Apps</button> <button class="btn btn-theme-outline" data-filter=".template">Template</button> <button class="btn btn-theme-outline" data-filter=".ios">IOS</button> <button class="btn btn-theme-outline" data-filter=".ui-ux">UI/UX</button> <button class="btn btn-theme-outline" data-filter=".graphic">Graphic</button> <button class="btn btn-theme-outline" data-filter=".wireframes">Wireframes</button> </div> <div class="gridder my-3"> <div class="grid-item apps wow zoomIn"> <div class="img-place" data-src="assets/img/work/work-1.jpg" data-fancybox data-caption="<h5 class='fg-theme'>Mobile Travel App</h5> <p>Travel, Discovery</p>"> <img src="assets/img/work/work-1.jpg" alt=""> <div class="img-caption"> <h5 class="fg-theme">Mobile Travel App</h5> <p>Travel, Discovery</p> </div> </div> </div> <div class="grid-item template wireframes wow zoomIn"> <div class="img-place" data-src="assets/img/work/work-2.jpg" data-fancybox data-caption="<h5 class='fg-theme'>Music App</h5> <p>Musics</p>"> <img src="assets/img/work/work-2.jpg" alt=""> <div class="img-caption"> <h5 class="fg-theme">Music App</h5> <p>Musics</p> </div> </div> </div> <div class="grid-item apps ios wow zoomIn"> <div class="img-place" data-src="assets/img/work/work-3.jpg" data-fancybox data-caption="<h5 class='fg-theme'>Gaming Dashboard</h5> <p>Games, Streaming</p>"> <img src="assets/img/work/work-3.jpg" alt=""> <div class="img-caption"> <h5 class="fg-theme">Gaming Dashboard</h5> <p>Games, Streaming</p> </div> </div> </div> <div class="grid-item graphic ui-ux wow zoomIn"> <div class="img-place" data-src="assets/img/work/work-4.jpg" data-fancybox data-caption="<h5 class='fg-theme'>Drugs Delivery App</h5> <p>Health, Drugs</p>"> <img src="assets/img/work/work-4.jpg" alt=""> <div class="img-caption"> <h5 class="fg-theme">Drugs Delivery App</h5> <p>Health, Drugs</p> </div> </div> </div> <div class="grid-item apps ios wow zoomIn"> <div class="img-place" data-src="assets/img/work/work-5.jpg" data-fancybox data-caption="<h5 class='fg-theme'>Musics Discover</h5> <p>Musics, Dashboard</p>"> <img src="assets/img/work/work-5.jpg" alt=""> <div class="img-caption"> <h5 class="fg-theme">Musics Discover</h5> <p>Musics, Dashboard</p> </div> </div> </div> <div class="grid-item graphic ui-ux wireframes wow zoomIn"> <div class="img-place" data-src="assets/img/work/work-6.jpg" data-fancybox data-caption="<h5 class='fg-theme'>Game Streaming</h5> <p>Games, Streaming</p>"> <img src="assets/img/work/work-6.jpg" alt=""> <div class="img-caption"> <h5 class="fg-theme">Game Streaming</h5> <p>Games, Streaming</p> </div> </div> </div> </div> <!-- End gridder --> <div class="text-center wow fadeInUp"> <a href="javascript:void(0)" class="btn btn-theme">Load More</a> </div> </div> </div> <!-- End Portfolio page --> <!-- Page Blog --> <div class="vg-page page-blog" id="blog"> <h1 class="text-center fg-dark wow fadeInUp">Latest Post</h1> <div class="container"> <div class="row post-grid"> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card"> <div class="img-place"> <img src="assets/img/work/work-9.jpg" alt=""> </div> <div class="caption"> <a href="javascript:void(0)" class="post-category">Technology</a> <a href="#" class="post-title">Invision design forward fund</a> <span class="post-date"><span class="sr-only">Published on</span> May 22, 2018</span> </div> </div> </div> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card"> <div class="img-place"> <img src="assets/img/work/work-6.jpg" alt=""> </div> <div class="caption"> <a href="javascript:void(0)" class="post-category">Business</a> <a href="#" class="post-title">Announcing a plan for small teams</a> <span class="post-date"><span class="sr-only">Published on</span> May 22, 2018</span> </div> </div> </div> <div class="col-md-6 col-lg-4 wow fadeInUp"> <div class="card"> <div class="img-place"> <img src="assets/img/work/work-1.jpg" alt=""> </div> <div class="caption"> <a href="javascript:void(0)" class="post-category">Design</a> <a href="#" class="post-title">5 basic tips for illustrating</a> <span class="post-date"><span class="sr-only">Published on</span> May 22, 2018</span> </div> </div> </div> <div class="col-12 text-center py-3 wow fadeInUp"> <a href="blog-minibar.html" class="btn btn-theme">See All Post</a> </div> </div> </div> </div> <!-- End page blog --> <!-- Page Contact --> <div class="vg-page page-contact" id="contact"> <h1 class="text-center fg-dark wow fadeInUp">Contact</h1> <div class="container-fluid"> <div class="row py-5"> <div class="col-lg-7 wow zoomIn"> </div> <div class="col-lg-5"> <form class="vg-contact-form"> <div class="form-row"> <div class="col-12 wow fadeInUp"> <input class="form-control" type="text" name="Name" placeholder="Your Name"> </div> <div class="col-6 wow fadeInUp"> <input class="form-control" type="text" name="Email" placeholder="Email Address"> </div> <div class="col-6 wow fadeInUp"> <input class="form-control" type="text" name="Subject" placeholder="Subject"> </div> <div class="col-12 wow fadeInUp"> <textarea class="form-control" name="Message" rows="6" placeholder="Enter message here.."></textarea> </div> <button type="submit" class="btn btn-theme mt-3 wow fadeInUp ml-1">Send Message</button> </div> </form> </div> </div> </div> </div> <!-- End page contact --> <!-- Footer --> <div class="vg-footer"> <h1 class="text-center">Virtual Folio</h1> <div class="container"> <div class="row"> <div class="col-lg-4 py-3"> <div class="footer-info"> <p>Where to find me</p> <hr class="divider"> <p class="fs-large fg-white">1600 Amphitheatre Parkway Mountain View, California 94043 US</p> </div> </div> <div class="col-md-6 col-lg-3 py-3"> <div class="float-lg-right"> <p>Follow me</p> <hr class="divider"> <ul class="list-unstyled"> <li><a href="#">Instagram</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Youtube</a></li> </ul> </div> </div> <div class="col-md-6 col-lg-3 py-3"> <div class="float-lg-right"> <p>Contact me</p> <hr class="divider"> <ul class="list-unstyled"> <li>info@virtual.com</li> <li>+8890234</li> <li>+813023</li> </ul> </div> </div> </div> <div class="row justify-content-center mt-3"> <div class="col-12 mb-3"> <h3 class="fw-normal text-center">Subscribe</h3> </div> <div class="col-lg-6"> <form class="mb-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Email address"> <input type="submit" class="btn btn-theme no-shadow" value="Subscribe"> </div> </form> </div> <div class="col-12"> <p class="text-center mb-0 mt-4">Copyright ©2020. All right reserved | This template is made with <span class="ti-heart fg-theme-red"></span> by <a href="https://www.macodeid.com/">MACode ID</a></p> </div> </div> </div> </div> <!-- End footer --> </div> <!-- End main wrapper --> <script src="assets/js/jquery-3.5.1.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/vendor/owl-carousel/owl.carousel.min.js"></script> <script src="assets/vendor/perfect-scrollbar/js/perfect-scrollbar.js"></script> <script src="assets/vendor/isotope/isotope.pkgd.min.js"></script> <script src="assets/vendor/nice-select/js/jquery.nice-select.min.js"></script> <script src="assets/vendor/fancybox/js/jquery.fancybox.min.js"></script> <script src="assets/vendor/wow/wow.min.js"></script> <script src="assets/vendor/animateNumber/jquery.animateNumber.min.js"></script> <script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script> <script src="assets/js/minibar-virtual.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIA_zqjFMsJM_sxP9-6Pde5vVCTyJmUHM&callback=initMap"></script> </body> </html>