2023-03-23 17:35:17 +07:00
<!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 >
