“CVHunt” - Responsive Resume & Portfolio HTML5 Template


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

  1. Typography
  2. Section Title

Content

  1. Header Section
  2. Site Navigation
  3. Profile Section
  4. Award & Milestone Section
  5. Resume Section
  6. Hire Me Section
  7. Service Section
  8. Portfolio Section
  9. Blog Section
  10. Testimonial Section
  11. Contact Section
  12. Address Section
  13. Footer Section

Responsive

  1. 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,
  1. index.html (For Default Layout)
  2. index-dark.html (For Dark Layout)
  3. index-leftmenu.html (For Leftmenu Layout)
  4. 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

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.

Profile Section

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".

                                
  • All
  • Protfolio Item

    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.

                                           
  • img01

    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.

                                     
    img01

    Here Is The Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis debitis adipisicing numquam perferendis.

    View Details

    Testimonials Section

    This is a simple bootstrap Carousel.

    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:

                                         
  • IMG
  • 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];
                                        }
                                

    There are a simple copyright message in footer section. You change it accordingly.