# Tunis - Personal Portfolio

Documentation version 1.0

## Introduction

- Item Name : Tunis - Personal Portfolio
- Item Version : v 1.0
- Author : Celtano
- Email : hamdislim2@gmail.com

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

#### Requirements

You will need the following sofwares to customize this template.

1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
3. FTP Tool to upload files to Server (eg: FileZilla)

Tunis is a creative personal & portfolio template based on Bootstrap 4.4.1. You can use it for your personal resume, CV or your portfolio.
Tunis is written in valid and clean HTML & CSS3 code. It’s easy to customize and also well documented so it’ll suit your needs.

# Features

- Responsive Layout
- 10 Color Skins
- Bootstrap 4 Framework
- Light/Dark
- Smoooth transitions
- Live Style Switcher
- Clean Code
- W3C Validated
- HTML5 & CSS3
- Cross Browser Compatible
- 100% Customizable
- Creative Preloader
- Creative Portfolio
- Project Image Format
- Project Slider Format
- Project Youtube Format
- Project Local Video Format
- Font Awesome Icons
- Well-commented code
- Google Fonts
- Working Ajax Contact Form
- Blog Pages

## Getting Started #back to top

The template is based on Bootstrap 4 https://getbootstrap.com/
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

#### General Structure

                                                        ....

                                                        ....

                                                        ....

                                                        ....

## Customization #back to top

#### Color Skin

This template comes with 10 files for predefined color skins, all are located under css/skins
In the example below, you need only to change the yellow.css file with your new color.

#### Skills Values

In order to change the values of the skills in ABOUT ME page, take a look at the following example : you only need to change the class p25 in the second line with p and the value of your skills, p80 for example.
Don't forget to change the text in the below span !

######

                                        25%

                                    html

## Portfolio #back to top

#### Image Format

#### Youtube Format

#### Slider Format

#### Local Video Format

## Contact #back to top

In order to receive emails in your inbox, open php/process-form.php and go to Line 10 : and replace youremail@mail.com with your email, that's it !

## Javascript Initilization #back to top

All scripts are initialized in custom.js file that is located under js directory

                                (function($) {

    	"use strict";

    	/* ----------------------------------------------------------- */
    	/*  FUNCTION TO STOP LOCAL AND YOUTUBE VIDEOS IN SLIDESHOW
        /* ----------------------------------------------------------- */

    	function stop_videos() {
    		var video = document.getElementById("video");
    		if (video.paused !== true && video.ended !== true) {
    			video.pause();
    		}
    		$('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
    	}

    	$(document).ready(function() {

    		/* ----------------------------------------------------------- */
    		/*  STOP VIDEOS
            /* ----------------------------------------------------------- */

    		$('.slideshow nav span').on('click', function () {
    			stop_videos();
    		});

    		/* ----------------------------------------------------------- */
    		/*  FIX REVEALATOR ISSUE AFTER PAGE LOADED
            /* ----------------------------------------------------------- */

    		$(".revealator-delay1").addClass('no-transform');

    		/* ----------------------------------------------------------- */
    		/*  PORTFOLIO GALLERY
            /* ----------------------------------------------------------- */

    		if ($('.grid').length) {
    			new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
    		}

    		/* ----------------------------------------------------------- */
    		/*  HIDE HEADER WHEN PORTFOLIO SLIDESHOW OPENED
            /* ----------------------------------------------------------- */

    		$(".grid figure").on('click', function() {
    			$("#navbar-collapse-toggle").addClass('hide-header');
    		});

    		/* ----------------------------------------------------------- */
    		/*  SHOW HEADER WHEN PORTFOLIO SLIDESHOW CLOSED
            /* ----------------------------------------------------------- */

    		$(".nav-close").on('click', function() {
    			$("#navbar-collapse-toggle").removeClass('hide-header');
    		});
    		$(".nav-prev").on('click', function() {
    			if ($('.slideshow ul li:first-child').hasClass('current')) {
    				$("#navbar-collapse-toggle").removeClass('hide-header');
    			}
    		});
    		$(".nav-next").on('click', function() {
    			if ($('.slideshow ul li:last-child').hasClass('current')) {
    				$("#navbar-collapse-toggle").removeClass('hide-header');
    			}
    		});

    		/* ----------------------------------------------------------- */
    		/*  PORTFOLIO DIRECTION AWARE HOVER EFFECT
            /* ----------------------------------------------------------- */

    		var item = $(".grid li figure");
    		var elementsLength = item.length;
    		for (var i = 0; i < elementsLength; i++) {
    			$(item[i]).hoverdir();
    		}

    		/* ----------------------------------------------------------- */
    		/*  AJAX CONTACT FORM
            /* ----------------------------------------------------------- */

    		$(".contactform").on("submit", function() {
    			$(".output_message").text("Sending...");

    			var form = $(this);
    			$.ajax({
    				url: form.attr("action"),
    				method: form.attr("method"),
    				data: form.serialize(),
    				success: function(result) {
    					if (result == "success") {
    						$(".form-inputs").css("display", "none");
    						$(".box p").css("display", "none");
    						$(".contactform").find(".output_message").addClass("success");
    						$(".output_message").text("Message Sent!");
    					} else {
    						$(".tabs-container").css("height", "440px");

    						$(".contactform").find(".output_message").addClass("error");
    						$(".output_message").text("Error Sending!");
    					}
    				}
    			});

    			return false;
    		});

    	});

    	$(document).keyup(function(e) {

    		/* ----------------------------------------------------------- */
    		/*  KEYBOARD NAVIGATION IN PORTFOLIO SLIDESHOW
            /* ----------------------------------------------------------- */
    		if (e.keyCode === 27) {
    			stop_videos();
    			$('.close-content').click();
    			$("#navbar-collapse-toggle").removeClass('hide-header');
    		}
    		if ((e.keyCode === 37) || (e.keyCode === 39)) {
    			stop_videos();
    		}
    	});

    })(jQuery);

## Sources and Credits #back to top

#### Javascript Files

- jQuery
- Modernizr
- Bootstrap, Popper
- Google Grid Gallery (cbpGridGallery.js, classie.js, imagesloaded.pkgd.min.js, masonry.pkgd.min.js)
- jQuery Revealator
- Direction Aware Hover Effect

#### CSS Files

- Bootstrap
- CSS Percentage Circle
- jQuery Revealator
- Font Awesome

#### Images

- https://www.pexels.com/photo/selective-focus-photo-of-woman-in-white-sleeveless-top-posing-2836485/
- https://unsplash.com/photos/ILip77SbmOE
- https://www.pexels.com/photo/art-artistic-asian-beautiful-877020/
- https://www.pexels.com/photo/japanese-lucky-coin-cat-932261/
- https://www.pexels.com/photo/art-artistic-asian-beautiful-877021/
- https://www.pexels.com/photo/chrome-closeup-construction-equipment-877015/
- https://www.pexels.com/photo/asia-asian-baked-bakery-806423/
- https://www.pexels.com/photo/art-asian-butterfly-color-114977/
- https://www.pexels.com/photo/close-up-colors-object-pastel-114119/
- https://www.pexels.com/photo/boat-ship-sailboat-paper-19678/
- https://www.pexels.com/photo/art-leaf-white-flower-68558/
- https://www.pexels.com/photo/mouse-and-books-on-black-surface-2903060/
- https://www.pexels.com/photo/silhouette-photography-of-group-of-people-jumping-during-golden-time-1000445/
- https://www.pexels.com/photo/photo-of-a-woman-laughing-wearing-black-top-2219118/
- https://www.pexels.com/photo/abstract-business-code-coder-270348/
- https://www.pexels.com/photo/man-holding-book-2781195/
- Portfolio Navigation Icons
- https://www.pexels.com/photo/laugh-neon-light-signage-turned-on-1115680/

#### Videos

- https://videohive.net/item/cinematic-logo/26502777
- https://www.youtube.com/watch?v=7e90gBu4pas

#### Google Fonts

- https://fonts.google.com/specimen/Open+Sans
- https://fonts.google.com/specimen/Poppins

Thank you for stop and buy. I'd be glad to help you if you have any questions relating to this template. I will try to do my best to assist.