CVHunt is a well designed multipurpose portfolio personal website where you can reveal
yourself. It is a combination of HTML5, CSS3, jQuery, Bootstrap3.x, Font Awesome4.x, CSS3 Animation. 100% responsive CVhunt includes the sections : Profile, resume, service, skills, portfoilio, blog, contact as well as google map.
Thank you for purchasing my theme. 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!
We assume that you possess html, css and bootstrap knowledge. Moreover if you fell more about this matter please visit HTML and Bootstrap3. Hope that will be sufficient for you. If you need custom development as well as need to know any thing specific for this theme that doesn't cover in this documentation, you are always welcome to contact us.
The image has used at live demo is not available with download package. That means you will get "http://placehold.it/" image instead of live demo image. Just need to replace place holder image with your own image. Be careful about the image path of html and css file. If you find any type of difficulties with image or want to get any live demo image, just contact with us by the mail [email protected].
Master Stylesheet Table of Contents
Global Styles
Typography
Section Title
Content
Header Section
Site Navigation
Profile Section
Award & Milestone Section
Resume Section
Hire Me Section
Service Section
Portfolio Section
Blog Section
Testimonial Section
Contact Section
Address Section
Footer Section
Responsive
Responsive Style
How to Modify or Customize
This theme has only four html file for four layout. So that, do any kind of changes please open specific file that you want to modify for your personal website.
How to Change Layout?
In Our Site, There are 4 Layouts. There are,
index.html (For Default Layout)
index-dark.html (For Dark Layout)
index-leftmenu.html (For Leftmenu Layout)
index-rightmenu.html (For Rightmenu Layout)
If You Want to Default layout, You Have to keep index.html file and remove rest of
index-dark.html, index-leftmenu.html & index-rightmenu.html.
To use other Layouts except default layout., it is necessary to rename that specific file as index.html file.
How to Change Color?
Eight Pre-defined unique style sheets are available in our package which are located in
color folder under css folder.
To use any of our unique color style sheet, copy that specific file and paste it into the css folder and rename the file
as style.css
Moreover you can use your strategy also.
NOTE : One style sheet ( styel.css ) is enough for any layout.
Also, If you want to customize your own color for your site, there are a great oppurtunity fo you. Just open less folder and generate your unlimited color schemes by changing variable.
How to Change Background?
Firstly, go to your master style sheet ( style.css ).
you will find some codes there as mentioned bellow. Change the background properties in your own way.
body {
background: #ffffff url('../img/patterns/.......');
}
How to Change Icone Fonts?
Here we have used Font Awesome for icon. If you want change or add new one then you can find all font collection from
here.
Section Title
We followed same coding standard for all section titile and subtile. That make it high customisable.
If you want to customize Title & Subtitle, just find out this type of code chunk from top of every section and chage it as your choice:
Profile
My Personal Info
Header Section
In header section contains some basic html masrkup. We consider that you can easily custotmize it as your requirement. To custmize header section please find out code chunk like bellow. Change it as you like.
It is noted that, there are three diffrent menu style you will find in diffrent layout. Plsase modify it accordinglly if use.
Hello, I'm
EONATHON JOE
UX Designer
Web Developer
Software Engineer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam autem ducimus enim fuga, iusto libero maiores mollitia nam similique.
There are some basic html code in our profile section. So, you can easily customize or modify as your demand.
Award Section
If you change or add new award or milestone item. Then you will find out a code chunk just like below. Font awsome has been used for item icon, so if it is needed just chnage icon class name.
600
Awards Win
Resume Section
There are two subsection under our resume section with great timeline. Touch enabled Owl Carousel has been used for both subsections.
Experience Timeline
If you want to customize or add new item in experience timeline, You have to find out this type of repeated code chunk just like bellow, then customize or repeat it as your demand.
2014-Present
LogicHunt
Software Engineer
Accusamus accusantium adipisci aspernatur beatae cupiditate
doloremque eius eos est eum expedita facere in incidunt
ipsum iure magnam.
Education Timeline
If you want to customize or add new item in education timeline, You have to find out this type of repeated code chunk just like bellow, then customize or repeat it as your demand.
University of art design
Master Degree of art
2013-2015
Hire Section
There are a simple menu and a button in this section. We think you can customize it easily.
Service Section
If you want to customize or add new item box in service section, You have to find out this type of repeated code chunk just like bellow, then customize or repeat it as your demand.
Web Development
NuAenean dapibus quam sem, eget ultricies felis aliquet quis. Duis blandit ultricies diam quis pretium. Aliquam fringilla interdum purus,
eget laoreet neque tempus vitae. Sed turpis quam, imperdiet vitae lacus quis, venenatis rutrum
metus. More
Skills Section
This section contains a simple description and some progress bar.
If you want to customize or add new progress bar with new value, then you have to find out this type of repeated code chunk just like bellow, then customize or repeat it as your demand.
Html5 & Css3 (95%)
Portfolio Section
This is a filterable portfolio with dynamic modal. So, it is necessary to customize carefully for geting perfect result.
Filter Area
First you need to add carefully filter select menu item in top of the section with proper data attribute "data-filter", which is more important to item filtering. It is noted that only fist menu item has been contains a class name "active".
Here we represent a code chunk of a single portfolio item. This contains a image with caption. At the bottom of the caption area you will find a button for modal action.
You can easily achieve your own portfolio by customize this.
It is need to add data attribute value of "data-cat" which was predefined at "data-filter" in filter select menu.
There are dynamic bootstrap modal. The content of this modal will be appeared automatically through data attribute. The date attributes "data-title", "data-description", "data-tag-cloud", "data-client", "data-service", "ata-highlight-text" and "data-image-url" need to change for each item to get actual modal preview.
Camera
LogicHunt
Blog Section
There are a Touch enabled Owl Carousel has been used.
If you want to customize or add new blog item, You have to find out this type of repeated code chunk just like bellow, then customize or repeat it as your demand.
Here Is The Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis debitis adipisicing numquam perferendis.
If you want to customize or add new item, You have to find out this type of repeated code chunk just like bellow, then customize or repeat it as your demand.
It is noted that first item must have a class "active".
Maxthon I. Albart
Founder of ThemeHunt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus,
commodi ex fuga iure officiis omnis veniam. Adipisci aperiam, blanditiis
error expedita impedit ipsa possimus, praesentium rerum sequi.
If you want change testimonial navigation iamge(client), change it form similar code as like bellow:
CONTACT FORM
In our contact form we used html, javascript and php validation for all field validation.
For send email we have used a popular classic email sending library for PHP name PHPMailer
To configure email sending options, you have to open config.php file from php folder.You can see the code just like bellow. Where we have describe all with comment.
It is noted that, you just change only variable value from config.php. Which will found under
"LGX ALL EMAIL CONFIGURATION".
//---------------------------------------------------------------------------------
//LGX ALL EMAIL CONFIGURATION
//---------------------------------------------------------------------------------
$admin_email_to = '..........'; /* Admin Email; Who Will Get The Contact Email Alert */
$admin_email_name = "Company Name"; /* Admin Name/Company name who will get the email alert */
$admin_email_from = '..........'; /* Admin email from which email address email will be sent */
$admin_email_from_name = 'System Admin'; /* Admin name from which email will be sent */
$use_custom_subject = false; /* If you want to use custom subject then set true. To use form subject just ignore it. */
$admin_email_subject = 'A new message from LogicHunt.com'; /* Custom email subject what the admin will get as contact email alert*/
$copy_email_subject = 'Thanks for contact'; /* Email subject what the user will get if the user agreed or select "copy me" */
/**
* To save all contacted email address is a csv file
* @type boolean
* @value Either true or false
* @default true
*/
$save_in_csv = false; /*If You Want to save as csv then just make it true */
/**
* keep false for default mail, set true for smtp
* if you set true, make sure configure smtp properly
* @value false|true
* @default: false
*/
$mail_send_type = false; /*if $mail_send_type is set to smtp, then complete this config*/
//---------------------------------------------------------------------------------
//LGX MAIL CONFIGURATION END
//---------------------------------------------------------------------------------
GOOGLE MAP
A jquery based plugin is used to show google map.For any need of customization you need to open customscript.js
from js folder.
The HTML Code for google Map :
Here you can change location by changing latitude and longitude from coords. you can change the icon by changing image icon path.
You also can change title and content . Also, you can change the look by changing the
maptype(roadmap,satellite,hybrid,terrain).
$(".map-canvas-default").googleMap({
zoom: 10, // Initial zoom level (optional)
coords: [23.810637, 90.400615], // Map center
type: "ROADMAP" // Map type (optional)
});
//for marker
$(".map_canvas").addMarker({
coords: [34.32, 117.14], // GPS coords
title: 'LogicHunt',
text: 'Lorem ipsum dolor sit amet, natus quaerat voluptas. Possimus quae quaerat quam reiciendis, sunt.',
icon: lgx_path + '/img/map-icon.png'
});
Sometimes you need to change file path. Then you will find it from customscript.js
var lgx_path = window.location.protocol + '//' + window.location.host;
var pathArray = window.location.pathname.split( '/' );
for (i = 1; i < (pathArray.length - 1); i++) {
lgx_path += '/';
lgx_path += pathArray[i];
}
FOOTER
There are a simple copyright message in footer section. You change it accordingly.
