# Geuz - Responsive Portfolio Template
DOWNLOADED FROM GFXTRA.COM

- created: 11/10/2017
- latest update: 11/10/2017
- by: ridianur
- themeforest.net/user/ridianur/portfolio
- DOWNLOAD LAST UPDATE

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here . Thanks so much!

### HTML Structure

This template is a responsive layout. All of the content area is nested within sections/divs. Here are some of the list of main section/divs(mainly on one-page style)

- Div id "home" for home content( slide/video/youtube).
- Div id "works" for works content
- Div id "about" for team & about section.
- Div id "client" for client section with bakground image.
- Div id "contact" for contact and message content

Every file have many comments within HTML code explaining it’s role part by part. Additionally every part of the code is marked by comments. Here is the example:

                                                     <!--PORTFOLIO FILTER-->
                                                    <ul class="port-filter">
                                                        <li><a class="active" href="#" data-filter="*">All</a></li>
                                                        <li><a href="#" data-filter=".design">Web Design</a></li>
                                                        <li><a href="#" data-filter=".development">Web Development</a></li>
                                                        <li><a href="#" data-filter=".photography">Photography</a></li>
                                                        <li><a href="#" data-filter=".brand">Brand Identity</a></li>
                                                    </ul>
                                                    <!--PORTFOLIO FILTER END-->

### CSS Files and Structure

This theme/template use some css for styling. Here are the list of the css and explanation:

- bootstrap.min.css for the foundation/default style
- font-awesome.min.css for icons
- prettyPhoto.css for lightbox
- slick.css for slider style
- magnific-popup.css for lighbox image popup.
- animate.css, magic.css for animation style
- jquery.fatNav.css for mobile menu style.
- style.css for default styles.

Those files contain all of the specific stylings for the page.

This file is separated into sections using

                                    /* -- Header Section ---*/

                                    some code

                                    /*-----Header Section end---/

                                    /* ----Main Section ---*/
                                    some code

                                    /*-----Main Section end----*/

                                    /* ----Sidebar Section ---*/
                                    some code
                                    /* ---- Footer ---*/
                                    some code
                                    etc, etc.

### Javascript/Jquery

This theme/template use some javascript/jquery plugin.

This theme imports three type of Javascript files.

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Most of the script/function in this template is carried out from the customs scripts. There are a few functions worth looking over. Some of script are trigger inside script.js (for homepage script), blog.js (for blog script) and portfolio.js for portfolio script.

       //Script something start... //some explanation...

3. Some plugin can be edit. It has some explanation inside it. For further edit this script you can visit the plugin page for more documentaion.Here are the list and the explanation

- bigvideo.js and video.js for video background . Visit the plugin site here
- jquery.imagesloaded.min.js for replacing video background with images in tablet/mobile view
- bootstrap.min.js for bootstrap foundation script. Visit the plugin site here
- jquery.nav.js for navigation and scrolling effect. Visit the plugin site here
- jquery.magnific-popup.min.js for lightbox. Visit the plugin site here
- modernizr.js for detects HTML5 and CSS3 features in the user’s browser. Visit plugin site here
- jquery.mb.YTPlayer.js for youtube background. Visit plugin site here
- isotope.pkgd.js for filtering on portfolio/works item. Visit plugin site here
- slick.min.js for swipe carousel/slider. Visit plugin site here
- slick-animation.js is for custom slider animation/transition effect.
- jflickrfeed.min.js for flickr script. Visit plugin site here
- portfolio.js for portfolio ajax setting
- contact.js for contact form
- jquery.stellar.js for stellar script. Visit plugin site here
- jquery.waypoints.min.js for waypoint script. Visit plugin here
- animate.js for element animation/transition script
- imgbg.js for , sliderbg.js image background
- map.js for google map
- one-page.js is script for one-page style homepage.
- jquery.fatNav.js for mobile menu script. Visit the plugin site in here
- totop.js is script for to top button.

### Setting Slider

This is the list of slider setting in script.js & blog.js and portfolio.js

for homepage slider

    //slider for home slider
        $('.home-slider').slick({
            autoplay: true,
            dots: false,
            autoplay: true,
            nextArrow: '<i class="fa fa-long-arrow-right"></i>',
            prevArrow: '<i class="fa fa-long-arrow-left"></i>',
            speed: 800,
            fade: true,
            pauseOnHover: false,
            pauseOnFocus: false
        });

for testimonial slider

    // testimonial slider
        $('.testi-slider').slick({
            autoplay: true,
            dots: false,
            autoplay: true,
            nextArrow: '<i class="fa fa-long-arrow-right"></i>',
            prevArrow: '<i class="fa fa-long-arrow-left"></i>',
            speed: 800,
            fade: true,
            pauseOnHover: false,
            pauseOnFocus: false
        });

for blog slider (in blog.js)

        //slider for blog slider
        $('.blog-slider').slick({
            autoplay: true,
            dots: false,
            nextArrow: '<i class="fa fa-arrow-right"></i>',
            prevArrow: '<i class="fa fa-arrow-left"></i>',
            speed: 800,
            fade: true,
            pauseOnHover: false,
            pauseOnFocus: false
        });

You can change the speed for the slider in the html pages(mostly in index.html files)

This is the example code for homepage slider

    <div class="home-slider ani-slider slider" data-slick='{"autoplaySpeed": 8000}'>

You can change the speed from 5000 value to your own value there (in milisecond).

You can check the full documentation to setting this slider in here

And for the animation of each element of slider (you can see the homepage slider html code for example), you need first to add class "ani-slider" for the slider.

After that, add the class "animated" for the element that you want to be animated. And there is data-attribute you need to use for that element, those are "data-animation" , "data-duration" , and "data-delay"

The data-animation value is based on class from animate.css/magic.css. You can see the list of the animation class in here and here.

eg. data-animation="fadeIn"

The data-duration value is the duration that you wanted for that animation (in second).

eg. data-value="0.5s"

The data-delay value is the delay for each element to start animate(in second).

eg. data-delay="0.5s"

Here is the full example code for the slider mask in homepage slider

    <div class="slider-mask" data-animation="slideUpReturn" data-delay="0.1s"></div>

As you can see, the slider mask is using animation slideUpReturn from animate.css and using the delay for starting the element animation after 0.1 second. And using the standar/default duration time for the animation.

You can try and experiment it with your slider there.

And dont forget to always included the slider animation script "slick-animation.js" and the css files (magic.css,animate.css).

### Setting Background Video

The video background is using bigvideo plugin. And you should host your own video for this or you have directlink for the video.

You can open the video-bg.js files in js folder for the template that using the video background and find this code

            if (Modernizr.touch) {
                //replace the data-background into background image
                $(".home-slider .slider-img-bg").each(function() {
                    var imG = $(this).data('background');
                    $(this).css('background-image', "url('" + imG + "') "

                    );
                });
            } else {
                //video background setting
                var BV = new $.BigVideo({
                    container: $('.home-slider'),
                    useFlashForFirefox:false
                });
                BV.init();
                BV.show(
                    'https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4' , //video source directlink
                    {ambient: true} //mute true
                );

            }

You can change the video https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4 with your own video there. And make sure your video is using h.264 codec for it so it can be played in any desktop browser.

For further explanation about this, you can visit the plugin site here

### Setting Youtube Video Background

Open the html files that containt the youtube video background(eg. index.html in one-page-youtube folder) and find this code:

    <!--YOUTUBE BACKGROUND-->
            <div class="bg-youtube" data-property="{videoURL:'http://www.youtube.com/watch?v=el3-Ik7Gzag', opacity:1, autoPlay:true, containment:'.home-slider', startAt:0, stopAt:0, mute:true, optimizeDisplay:true, showControls:false, printUrl:true, loop:true, addRaster:false, quality:'hd1080', realfullscreen:'true', ratio:'auto'}"></div>
            <!--YOUTUBE BACKGROUND END-->

You can change el3-Ik7Gzag with your own youtube ID

And you can check this page for further setting here

### Setting Portfolio Filter

This portfolio filter is using isotope plugins to filtered the portfolio items.

This is the filter navigation code:

<ul class="port-filter">
<li><a class="active" href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter=".design">Web Design</a></li>
<li><a href="#" data-filter=".development">Web Development</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
</ul>

Base on those code, the filter is divided into some data-filter. Those data-filter will be the class of each portfolio.

This is the example code for portfolio with data-filter/class development

                     <div class="col-md-3 port-item development ani-width">
                            <div class="port-inner">
                                <a href="work1.html" class="port-link"></a>
                                <div class="port-box"></div>
                                <div class="port-img width-img img-bg" data-background="images/work/1.jpg"></div>
                                <div class="img-mask"></div>
                                <div class="port-dbox">
                                    <div class="dbox-relative">
                                        <h3>The truth</h3>
                                        <p>Web Development</p>
                                    </div><!--/.dbox-relative-->
                                </div><!--/.port-dbox-->
                            </div><!--/.port-inner-->
                        </div><!--.port-item-->

so when you press the "Web Development" filter the plugin will only show the portfolio with "development" class.

You can see the better explanation in the plugin site here

### Setting animation style css

First you need to add the class "animated" for the element that you want to be animated. And there is data-attribute you need to use for that element, those are "data-animated" , "data-duration" , and "data-delay"

The data-animated value is based on class from animate.css/magic.css. You can see the list of the animation class in here and here.

eg. data-animation="fadeIn"

The data-duration value is the duration that you wanted for that animation (in second).

eg. data-value="0.5s"

The data-delay value is the delay for each element to start animate(in second).

eg. data-delay="0.5s"

You can check the aniamate style effect in here and here

Here is the example

    <div class="content-line animated" data-animated="swashIn" data-delay="0.2s"></div>

And dont forget to included the file animate.css,magic.css , animated.js to make it works.

### For image slide/shited effect (eg. portfolio items)

Here is the default code for the portfolio item code

                    <div class="col-md-3 port-item development ani-width">
                            <div class="port-inner">
                                <a href="work1.html" class="port-link"></a>
                                <div class="port-box"></div>
                                <div class="port-img width-img img-bg" data-background="images/work/1.jpg"></div>
                                <div class="img-mask"></div>
                                <div class="port-dbox">
                                    <div class="dbox-relative">
                                        <h3>The truth</h3>
                                        <p>Web Development</p>
                                    </div><!--/.dbox-relative-->
                                </div><!--/.port-dbox-->
                            </div><!--/.port-inner-->
                        </div><!--.port-item-->

You need to add "ani-width" class to portfolio parent element. And dont forget to add the other "data-" value there(except for data-animation).

You need to set the data-background with any images that you want to used. And use that code inside some container/column element.

### Setting Lightbox

If you want to insert video or image hyperlink with lightbox dont forget to add class="popup-img"
or class="popup-gallery" (for single works page) inside the code.

This is example code:

                    <a class="popup-img" href="images/work/big1.jpg">

                    <img alt="works" src="images/work/1.jpg">

                    </a>

You can view this page for further explanation.

### Setting Responsive Embed Video

The responsive video is using fitvids plugin. This is the code inside script.js and portfolio.js
This is the script

                                 // Video responsive
                                $("body").fitVids();

That code mean the responsive video is inside the "body"

for further setting you can check this page

Remember, this plugin only works for embeded video/iframe from some major site.

### Image Background

You can use image background for most of the element.

First make sure the html files already use the imgbg.js

If not you can add this at the very bottom (before </body>)

    <script type="text/javascript" src="multi-page/js/imgbg.js"></script>

After that, make sure to add class "img-bg" to the element and insert the images source in "data-background" value.

Here is the example code for it

    <div class="port-img width-img img-bg" data-background="images/work/5.jpg"></div>

For the homepage slider, you need to included sliderbg.js or this code at very bottom

    <script type="text/javascript" src="js/sliderbg.js"></script>

And after that, you need to add class slider-img-bg to the element and insert the images source in "data-background" value.

Here is the example code for it

    <div class="slider-img-bg" data-animation="vanishIn" data-delay="0.2s" data-animation-duration="0.7s" data-background="images/slider/1.jpg"></div>

But remember , do not included the sliderbg.js file in homepage with video background or homepage with youtube background template files.

### Setting Parallax Effect

The parallax effect is using stellar.js

So make sure the page is already load the script, or you can add this code (before </body>)

    <script type="text/javascript" src="js/jquery.stellar.js"></script>

And after that you can add "data-stellar-ratio" for parallax effect the entire element, or "data-stellar-background-ratio" only for the background image.

Here is the example code (background parallax).

Try to use this code if you want add parallax in middle of the page content.

    <div class="para-img" data-stellar-background-ratio="0.8"></div>

For element parallax, you need to add "data-stellar-ratio" for the element you want to add parallax effect.

Here is the example code (element parallax)

Try to use this code only for the first element/very top of the page content (eg. homepage slider)

        <div class="box-relative work-img-box" data-stellar-ratio="0.8">

You can check this page for more detail.

### Removing animation

If you want to remove the animation in every element(except the slider). You can simply remove this code in the bottom of html files(before </body> tag )

    <script type="text/javascript" src="js/animate.js"></script>

To remove the slider animation, you can remove this code in the bottom of html files(before </body> tag )

    <script type="text/javascript" src="js/slick-animation.js"></script>

### Setting Google Map

You can setting based on you location in map.js

Find this code:

        //google map load
        $('#map_canvas').gmap({
            'center': '-6.94010,107.62575',
            'zoom': 15,
            scrollwheel: false,
            'disableDefaultUI': false,
            'styles': [{
                stylers: [{
                    lightness: 7
                }, {
                    saturation: -100
                }]
            }],
            'callback': function() {
                var self = this;

                self.addMarker({
                        'position': this.get('map').getCenter(),
                        icon: 'images/office-building.png',
                    })
            }
        });

change "-6.94010,107.62575" with place in google map base on Latitude and Longitude. You can check you Latitude and Longitude in here

"'zoom': 15," is for your zoom setting. You can change the "15" with your own value.

Change this code if you want to change the marker picture:

    icon: 'images/office-building.png',

For api key, go to this link to get your api key for google map. You can read this page to create the api key.
After that, inser your api key in YOUR_API_KEY in index.html file and find this code:

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=true"></script>

For further information you can check this page .

### Setting Contact Form

Make sure your host is support php files. And avoid any error in php files while you editing the files (try to use HTML editor that has auto validation/correction).

You can open contact.php in main folder ,contact.js in js folder for setting contact section.

There is comment in files for explanation.

### Source and Credit

This template is using the following images, icons or other files as listed.

- Image in Demo Page from Unsplash
- Video In Demo Page Shakir Dzheyranov – Detailvision
- Fonts fontawesome-webfont
- Google Fonts Rubik
- Google Fonts Roboto
- Google Fonts Playfair Display

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help, if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section and contact me via my profile here.