<!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 &copy;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>