oyFolio - Responsive HTML Portfolio Template

documentation

oyFolio is a modern and elegant Onepage HTML template. Every single detail is carefully designed in order to create a wonderful user experience.

oyFolio is very easy to set up and customize and comes with a well documented help file, which will assist you configure the template in minutes.

turn off loading screen

Open the index.html file using any text editor. We recommend Sublime Text. Now look for the following code and remove them.

  1. <!-- Start Loading Screen -->
  2. <div class="loading-screen">
  3.      <div class="loading">
  4.           <img src="images⁄oyFolio-Logo.png" alt="">
  5.      <⁄div>
  6.      <div class="my-name">
  7.           <span>oyFolio<⁄span><br>
  8.           <span>responsive HTML portfolio template<⁄span>
  9.      <⁄div>
  10. <⁄div>
  11. <!-- End Loading Screen -->

Save the file and refresh your browser.

welcome section

To edit the text in 'Welcome Section' Open the script.js file using any text editor then look for the following code and replace highlighted text.

  1. ⁄ ⁄ Fire Typed Plugin in Header
  3. $(".window-background-content span:first-of-type").typed({
  4.      strings: ["Lorem ipsum is a pseudo-Latin text used in web design,"],
  5.      typeSpeed: 16,
  6.      startDelay: 1200,
  7.      showCursor: false
  8. });
  10. $(".window-background-content span:last-of-type").typed({
  11.      strings: ["It helps to outline the visual elements of a document or presentation,<br>eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text<br>by the classical author and philosopher Cicero..."],
  12.      typeSpeed: 16,
  13.      startDelay: 5000,
  14.      showCursor: false
  15. });

Save the file and refresh your browser.

features section

To edit the text in 'Features Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

  1. <!-- Start Features -->
  2. <div id="features" class="features">
  3.      ..............
  4.      ..............
  5.      ..............
  6.      ..............
  7.      ..............
  8.      ..............
  9.      ..............
  10.      ..............
  11.      ..............
  12.      ..............
  13.      ..............
  14.      <div class="container">
  15.           <h2>Features<⁄h2>
  16.           <h3>Contrary to popular belief, Lorem Ipsum is not simply random text.<⁄h3>
  17.           <div class="features-boxs">
  18.                <div>
  19.                     <i class="fa fa-desktop" aria-hidden="true"><⁄i>
  20.                     <h4>Web Design<⁄h4>
  21.                     <p>totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.<⁄p>
  22.                <⁄div>
  23.                <div>
  24.                     <i class="fa fa-code" aria-hidden="true"><⁄i>
  25.                     <h4>Clean & Valid<⁄h4>
  26.                     <p>totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.<⁄p>
  27.                <⁄div>
  28.                <div>
  29.                     <i class="fa fa-mobile" aria-hidden="true"><⁄i>
  30.                     <h4>Fully Responsive<⁄h4>
  31.                     <p>totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.<⁄p>
  32.                <⁄div>
  33.                <div>
  34.                     <i class="fa fa-space-shuttle" aria-hidden="true"><⁄i>
  35.                     <h4>Fast Loading<⁄h4>
  36.                     <p>totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.<⁄p>
  37.                <⁄div>
  38.           <⁄div>
  39.      <⁄div>
  40. <⁄div>
  41. <!-- End Features -->

Save the file and refresh your browser.

my skills section

To edit the text in 'My Skills Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

  1. <!-- Start My Skills -->
  2. <div id="my-skills" class="my-skills">
  3.      <div class="container">
  4.           <h2>my amazing skills<⁄h2>
  5.           <h3>Lorem Ipsum is not simply random text!<⁄h3>
  6.           <div class="my-skills-boxs">
  7.                <div class="webDesign-circle-progress">
  8.                     <strong><i>0 %<⁄i><⁄strong>
  9.                     <h4>web design<⁄h4>
  10.                <⁄div>
  11.                <div class="graphicsDesign-circle-progress">
  12.                     <strong><i>0 %<⁄i><⁄strong>
  13.                     <h4>graphics<⁄h4>
  14.                <⁄div>
  15.                <div class="phpDeveloper-circle-progress">
  16.                     <strong><i>0 %<⁄i><⁄strong>
  17.                     <h4>PHP<⁄h4>
  18.                <⁄div>
  19.                <div class="javaScript-circle-progress">
  20.                     <strong><i>0 %<⁄i><⁄strong>
  21.                     <h4>java script<⁄h4>
  22.                <⁄div>
  23.           <⁄div>
  24.      <⁄div>
  25. <⁄div>
  26. <!-- End My Skills -->

To edit the progress percentage Open the script.js file using any text editor then look for the following code and replace highlighted numbers.

  1. $(window).on("scroll.mySkills-1", function () {
  2.      if ($(this).scrollTop() >= $(".my-skills-boxs div:first-of-type").offset().top - $(window).height() + 150) {
  4.           $(".webDesign-circle-progress").circleProgress({
  5.                value: 0.85
  6.           }).on('circle-animation-progress', function (event, progress) {
  7.                $(this).find('strong').html(Math.round(85 * progress) + '<i>%<⁄i>');
  8.           });
  10.           $(window).off("scroll.mySkills-1");
  12.      }
  13. });
  15. $(window).on("scroll.mySkills-2", function () {
  16.      if ($(this).scrollTop() >= $(".my-skills-boxs div:nth-of-type(2)").offset().top - $(window).height() + 150) {
  18.           $(".graphicsDesign-circle-progress").circleProgress({
  19.                value: 0.65
  20.           }).on('circle-animation-progress', function (event, progress) {
  21.                $(this).find('strong').html(Math.round(65 * progress) + '<i>%<⁄i>');
  22.           });
  24.           $(window).off("scroll.mySkills-2");
  26.      }
  27. });
  29. $(window).on("scroll.mySkills-3", function () {
  30.      if ($(this).scrollTop() >= $(".my-skills-boxs div:nth-of-type(3)").offset().top - $(window).height() + 150) {
  32.           $(".phpDeveloper-circle-progress").circleProgress({
  33.                value: 0.8
  34.           }).on('circle-animation-progress', function (event, progress) {
  35.                $(this).find('strong').html(Math.round(80 * progress) + '<i>%<⁄i>');
  36.           });
  38.           $(window).off("scroll.mySkills-3");
  40.      }
  41. });
  43. $(window).on("scroll.mySkills-4", function () {
  44.      if ($(this).scrollTop() >= $(".my-skills-boxs div:last-of-type").offset().top - $(window).height() + 150) {
  46.           $(".javaScript-circle-progress").circleProgress({
  47.                value: 0.75
  48.           }).on('circle-animation-progress', function (event, progress) {
  49.                $(this).find('strong').html(Math.round(75 * progress) + '<i>%<⁄i>');
  50.           });
  52.           $(window).off("scroll.mySkills-4");
  54.      }
  55. });

Save the files and refresh your browser.

using contact form

To turn on contact form Open the contact_form.php file using any text editor then look for the following code and replace highlighted text and save the file.

  1. $mail_to = "youremail@email.com";  ⁄⁄ replace it with your email
  1. date_default_timezone_set("Africa⁄Cairo");  ⁄⁄ replace it with your timezone

You can find your timezone in This Page.

Google Map

To change the google map to your location open the script.js file and search for the following code and replace highlighted text with your own google map code and save the file.

  1. ⁄⁄ Google Maps
  3. google.maps.event.addDomListener(window, 'load', myMap);
  4. function myMap() {
  5.      var myCenter = new google.maps.LatLng(30.0444196, 31.23571160000006),
  6.           mapOptions = {
  7.                center: myCenter,
  8.                mapTypeControl: false,
  9.                streetViewControl: false,
  10.                scrollwheel: false,
  11.                zoom: 12
  12.           },
  13.           mapCanvas = document.getElementById("map"),
  14.           map = new google.maps.Map(mapCanvas, mapOptions),
  15.           marker = new google.maps.Marker({position: myCenter});
  16.      marker.setMap(map);
  17. }

To get Latitude & Longitude please visit This Page.

Thank You

Finally thank you very much for choosing this template. Please keep in mind that we are working very hard to providing better quality in coming days.

If you have any questions that are beyond the scope of this help file, please contact me via my profile.