DECENT

Material CV & Resume

Thank you for purchasing our theme. If you need any further help then feel free to contact us anytime via our email or user page contact form here. We will try to reply within 24 hours. Thanks so much! Have a nice journey with us....

HTML Structuree

This template is higly responsive and very easy to customize. Here is all the Sections of the template. If you do not want to use any one of the sections just remove that section code. There are mainly 16 diferent sections in the body.

1. PAGE LOADER 9. ACHIEVEMENT
2. HEADER 10. PUBLICATIONS
3. ABOUT 11. BLOG
4. EXPERIENCE 2. CLIENTS
5. SKILLS 13. PRICING TABLE
6. EDUCATION 14. INTEREST
7. SERVICES 15. CONTACT
8. PORTFOLIOS 16. FOOTER 
<!DOCTYPE html>
<html lang="en">
    <head>
        ---------------------------------------------------------
    </head>
    <body>
        <!--==========================================
                         PAGE LOADER
        ===========================================-->
        <div id="page-loader">
            ---------------------------------------------------------
        </div>
        <!--==========================================
                         HEADER
        ===========================================-->
        <div id="header" class="shadow">
            ---------------------------------------------------------
        </div>
        <!--==========================================
                           ABOUT
        ===========================================-->
        <section id="about" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           EXPERIENCE
        ===========================================-->
        <section id="experience" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           SKILLS
        ===========================================-->
        <section id="skills" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           EDUCATION
        ===========================================-->
        <section id="education" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           SERVICES
        ===========================================-->
        <section id="services" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           PORTFOLIOS
        ===========================================-->
        <section id="portfolios" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                       ACHIEVEMENT
        ===========================================-->
        <section id="achievement" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                       PUBLICATIONS
        ===========================================-->
        <section id="publications" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           BLOG
        ===========================================-->
        <section id="blog" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           CLIENTS
        ===========================================-->
        <section id="clients" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                       PRICING TABLE
        ===========================================-->
        <section id="pricing" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                           INTEREST
        ===========================================-->
        <section id="interest" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                            CONTACT
        ===========================================-->
        <section id="contact" class="section">
            ---------------------------------------------------------
        </section>
        <!--==========================================
                            FOOTER
        ===========================================-->
        <footer>
            ---------------------------------------------------------
        </footer>
    </body>
</html>

Stylesheets & SASS

CSS Stylesheets

There are mainly 8 .css stylesheets.

1. animate.css 5. font-awesome.min.css
2. aos.min.css 6. ionicons.min.css
3. bootstrap.css 7. swiper.css
4. materialize.css 8. style.css
 
Here Sass is used to generate the custom stylesheet style.css. Sass (Syntactically Awesome Style Sheets) is an extension of CSS that adds power and elegance to the basic language. It allows to use variables, nested rules, mixins, inline imports, and more.
 
We used 2 frontend framework, Bootstrap (bootstrap.css) and Materialize (materialize.css). Mainly grid systems are taken from Bootstrap and material design elements are taken from Materialize. Our custom stylesheet style.css is also very well structured and very easy to change, but that work will be more and much easier for you if you can use the .sass files, as they are separeted for every section and their element.
 
SASS Stylesheets

There are 20 .scss files. All are imported in style.scss generates the style.css file. _variable.scss has all the color font and others variables used in the tamplate. If you know SASS already it will be much easier to customize the stylesheets. You can learn more about SASS here. The .scss files are - 

1. _variables.scss 11. _modal.scss
2. _page-preloader.scss 12. _achievement.scss
3. _section.scss 13. _publications.scss
4. _container.scss 14. _blog.scss
5. _header.scss 15. _clients.scss
6. _about.scss 16. _pricing.scss
7. _timeline.scss 17. _interest.scss
8. _skills.scss 18. _contact.scss
9. _services.scss 19. _inputs.scss
10. _portfolio.scss 20. _footer.scss

If you dont like to use SASS just remove the style.scss & style.css.map from stylesheets folder and edit the style.css only.

JavaScripts

There are 10 JavaScript files in this themplate.

1. jquery-2.1.3.min.js
 6. materialize.min.js
2. aos.min.js 7. retina.min.js
3. Google Map Api 8. jquery.filterizr.min.js
4. custom-map.js 9. swiper.jquery.min.js
5. bootstrap.min.js 10. custom-script.js

Here custom-map.js & custom-script.js are  mainly our javascript.

Fonts & Icons

Google Font

Roboto Font is used as the theme deafult font.

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

And the following CSS rules is used to specify these families:

font-family: 'Roboto', sans-serif;

You can chose your font from https://fonts.google.com/ and change easily by replacing the HTML link and CSS rules.

 

Icon Font

In this template we have used IonIcons Icon Font & Font Awesome Icon Font  you Can easily replace them and you also can use Google Material Icon Font & some of Glyphs Icon Font from Boostrap. All are seted in this templated you need not to install any new thing, or need not to use any other files for using the Icon Fonts for this 4 tyes. In HTML link they are like bellow, and boostrap.css contains the properties for Glyphs Icon Font.

<!-- Google Material Icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome Icon -->
<link href="stylesheets/font-awesome.min.css" rel="stylesheet">
<!-- IonIcons Icon -->
<link href="stylesheets/ionicons.min.css" rel="stylesheet">

You can chose any Icons from -

1. IonIcons Icon Font http://ionicons.com/
2. Font Awesome Icon Font http://fontawesome.io/icons/
3. Google Material Icon Font https://design.google.com/icons/
4. Bootstrap Glyphs Icon Font http://getbootstrap.com/components/#glyphicons

 

Retina Image

Our template is Retina Ready. Anf for this retina.min.js is used. This plugin makes images retina ready, but for this all you have to do, just add a double size (2x) of image of the normal image in the images folder with the mane picture@2x.jpg for the normal image picture.jpg. Some examples are given bellow:

Normal Image Name & Size Retina Image Name & Size
profile-pic.jpg (200X200 px) profile-pic@2x.jpg (400X400 px)
blog-pic.jpg (800X450 px) blog-pic@2x.jpg (1600X900 px)
logo.png (120X50 px) logo@2x.png (240X100 px)

 

Changing Theme Color

We added extra 15 different style-color-name.css stylesheets in the stylesheets folder which are actually the copy of the deafult style.css file but different in color. The files are - 

1. style.css (deafult & same as style-blue-grey.css) 9. style-green.css
2. style-red.css 10. style-light-green.css
3. style-pink.css 11. style-amber.css
4. style-purple.css 12. style-orange.css
5. style-deep-purple.css 13. style-deep-orange.css
6. style-indigo.css 14. style-brown.css
7. style-blue.css 15. style-blue-grey.css
8. style-teal.css 16. style-grey.css
   
    <!-- Custom Style -->
    <link href="stylesheets/style-red.css" rel="stylesheet">
    <link href="stylesheets/style-pink.css" rel="stylesheet">
    <link href="stylesheets/style-purple.css" rel="stylesheet">
    <link href="stylesheets/style-deep-purple.css" rel="stylesheet">
    <link href="stylesheets/style-indigo.css" rel="stylesheet">
    <link href="stylesheets/style-blue.css" rel="stylesheet">
    <link href="stylesheets/style-teal.css" rel="stylesheet">
    <link href="stylesheets/style-green.css" rel="stylesheet">
    <link href="stylesheets/style-light-green.css" rel="stylesheet">
    <link href="stylesheets/style-amber.css" rel="stylesheet">
    <link href="stylesheets/style-orange.css" rel="stylesheet">
    <link href="stylesheets/style-deep-orange.css" rel="stylesheet">
    <link href="stylesheets/style-brown.css" rel="stylesheet">
    <link href="stylesheets/style-blue-grey.css" rel="stylesheet">
    <link href="stylesheets/style-grey.css" rel="stylesheet">

    <!-- Default Style same as style-blue-grey -->
    <link href="stylesheets/style.css" rel="stylesheet">

Now if you want to change the theme color from these 15 colors just cut the link and paste that after the deafult style.css link. As Example, If you like to change the theme color in deep purple (style-deep-purple.css) then jusy cut the link line and paste it after the deafult style (style.css) link line. As shown bellow:

    <!-- Default Style same as style-blue-grey -->
    <link href="stylesheets/style.css" rel="stylesheet">

    <!-- Selected Color -->
    <link href="stylesheets/style-deep-purple.css" rel="stylesheet">

But if you dont like any of the 15 colors, you can also use your choosen color in this theme, For this you just change the color from style.css as your wish. And this work will be much esier if you can change them from sass variable file named _variable.scss by using SASS.

Section Customization

Here you will get a brif idea about how to make changes in all section and fill up with your information.

About Section

Chnage your profile picture, Manage social links and edit your into paragraph. You can place your CV file into the cv folder and then Download CV button downloads your cv in action.

<div class="col col-md-12">
    <!-- Profile Picture [Square] -->
    <div id="profile" class="center-block">
        <img src="images/profile-pic.png">
    </div>
    <!-- Social Links -->
    <div id="intro-div" class="card content-wrapper">
        <ul class="text-center list-inline">
            <li><a href="#0" target="_blank"><i class="ion-social-facebook"></i></a></li>
            ------------------------------------------------------------------------------------
        </ul>
        <!-- Some Intro About You -->
        <p class="text-center">
            ------------------------------------------------------------------------------------
        </p>
        <div class="row">
            <!-- Download & Contact Button -->
            <div class="col col-xs-12 col-sm-12 col-md-12 text-center">
                <!-- Your CV File -->
                <a href="cv/cv-file.docx" download="cv-file.docx" class="btn waves-effect waves-light btn-primary custom-btn">Download CV</a>
                <a href="#contact" class="btn waves-effect waves-light btn-primary custom-btn">Contact Me</a>
            </div>
        </div>
    </div>
</div>

 

Timeline

Change Timeline with your Information. Experience and Education Section has this same structure. Experience timeline structure is shown below.

<li class="card" data-aos="fade-up">
    <i class="title-icon fa fa-circle"></i>
    <div class="timeline-content">
        <!-- Heading -->
        <div class="timeline-header">
            <h3 class="text-capitalize">Heading...........</h3>
        </div>
        <!-- Organization and Period -->
        <p class="sub-heading">Organization...........</p>
        <p class="sub-heading">From........ - To..........</p>
        <!-- Job Summary -->
        <p class="content-p">
            --------------------------------------------------------------
        </p>
    </div>
</li>

 

Skill Section

Change your skill heading, skill name and skill value in <span></span> tab and data-percent="".

<div class="col col-md-4 col-sm-4 col-xs-12">
    <div class="card content-wrapper skill-wrapper" data-aos="fade-up" data-aos-delay="300">
        <h5 class="text-center skill-title">Skill Heading...............</h5>
        <div class="skill-progress-div">
            <!-- Add Skill -->
            <p>Skill Name.........<span>90%</span></p>
            <!-- Edit Value Here -->
            <div class="progress skill-progress" data-percent="90%">
                <div class="determinate skill-determinate">
                    <i class="skill-determinate-circle fa fa-circle"></i>
                </div>
            </div>
        </div>
        -----------------------------------------------------------------
        -----------------------------------------------------------------
        -----------------------------------------------------------------
    </div>
</div>

 

Service Section

Change your service icon, name and information.

<li class="col col-md-4 col-sm-6 col-xs-12">
    <div class="card service-item text-center" data-aos="fade-up" data-aos-delay="300">
        <!-- Edit icon and title here -->
        <i class="icon-class..........."></i>
        <h6 class="text-capitalize">Service Name............</h6>
        <!-- service info here -->
        <p class="text-center">
            --------------------------------------------------
        </p>
    </div>
</li>

 

Portfolio Section

Change <a></a> tag data filter value, image, title, modal title, info and content. The data traget of <!-- open-modal ID --> must me same as modal id.

<div class="row">
    <ul class="text-center simple-filter">
        <li class="active-cat" data-filter="all"><a>All</a></li>
        <li data-filter="1"><a>-----------------</a></li>
        <li data-filter="2"><a>-----------------</a></li>
        <li data-filter="3"><a>-----------------</a></li>
        <li data-filter="4"><a>-----------------</a></li>
        <li data-filter="5"><a>-----------------</a></li>
    </ul>

    <div class="filtr-container center-block">
        <!-- 1st Portfolio, Filter Option -->
        <div class="col col-md-3 col-sm-6 col-xs-12 filtr-item" data-category="1, 5">
            <div class="portfolio card" data-aos="fade-up" data-aos-delay="300">
                <figure class="hover-effect">
                    <!-- Portfolio Image -->
                    <img class="img-responsive" src="images/portfolios/portfolio.jpg" alt="">
                    <!-- open-modal ID -->
                    <a data-toggle="modal" data-target="#modal-number" href="#0">
                        <figcaption><span>View Details</span></figcaption>
                    </a>
                </figure>
                <!-- Portfolio Title -->
                <h6 class="text-capitalize text-center">Portfolio Title Here</h6>
            </div>
        </div>
        <!-- ./Portfolio -->

        <!-- 1st MODAL -->
        <div id="modal-number" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content animated zoomIn">
                    <h3 class="text-capitalize text-left">----------------</h3>
                    <div class="row">
                        <!-- Modal Image -->
                        <img class="img-responsive col-md-8 col-sm-12 col-xs-12" src="images/portfolios/portfolio.jpg" alt="">
                        <!-- Modal Content -->
                        <div class="content col-md-4 col-sm-12 col-xs-12">
                            <!-- Date, Category & Client Name of the Project -->
                            <p><span>Date:&nbsp;</span>----------------</p>
                            <p><span>Category:&nbsp;</span>----------------</p>
                            <p><span>Client:&nbsp;</span>----------------</p>
                            <!-- Live Demo Link -->
                            <a href="#0" target="_blank" class="btn modal-btn waves-effect waves-light btn-primary custom-btn">Live Demo</a>
                            <!-- Some Information Abut the Project -->
                            <p class="text-left">
                                ------------------------------------------------------------
                            </p>
                            <button data-dismiss="modal" class="btn right modal-btn close-btn waves-effect waves-light btn-primary custom-btn">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ./modal -->      
        ------------------------------------------------------------
        ------------------------------------------------------------
        ------------------------------------------------------------
    </div>
</div>

 

Achievement Section

Change Achievent title, icon, date and content info. <!-- Button ID For Content --> Must be same as Content ID. 

<!-- 1st Achievement -->
<div class="col col-md-4 col-sm-6 col-xs-12">
    <div class="achievement" data-aos="fade-up" data-aos-delay="300">
        <div class="achievement-top-bar">
            <!-- Achievement Title Here -->
            <h5 class="text-center text-capitalize">---------------</h5>
        </div>
        <div class="achievement-inner">
            <div class="achievement-header">
                <div class="achievement-heading">
                    <!-- Icon and Date -->
                    <i class="text-center icon-class..........."></i>
                    <h6 class="text-center">---------------</h6>
                </div>
                <!-- Button ID For Content -->
                <a id="btn-1" class="btn-floating waves-effect waves-light btn-large achievement-more-btn custom-btn">
                    <i class="ion-ios-arrow-down"></i>
                </a>
            </div>
            <!-- Content ID -->
            <div id="content-1" class="achievement-content">
                <!-- Description -->
                <p class="text-center">
                    ------------------------------------------------------
                </p>
            </div>
        </div>
    </div>
</div>
<!-- ./1st Achievement -->

We have reserved upto 12 acivent in this theme, if you need more, you need to add some scripts in our custom-script.js file.

/* =============== Achievement toggle button =============== */
$( "#btn-1" ).on('click', function() {
            $("#content-1").slideToggle();
});
-------------------------------------------
-------------------------------------------
-------------------------------------------
/* After 12th div you need to add the following............ */
$( "#btn-number" ).on('click', function() {
            $("#content-number").slideToggle();
});

 

Publication Section

Change icon, Name, type, date, info and read more link of your publications.

<!-- 1st publication -->
<div class="col col-md-6 col-sm-12 col-xs-12">
    <div class="publication card text-center" data-aos="fade-up" data-aos-delay="300">
        <!-- place Icon Here -->
        <div class="icon-div text-center"><i class="ion-class......."></i></div>
        <h6 class="text-center text-capitalize">Name of the book will be placed here</h6>
        <!-- Type and Published date here -->
        <ul class="text-center list-inline">
            <li><i class="ion-ios-pricetag"></i>Type: ------------</li>
            <li><i class="ion-calendar"></i>Published On: -----------------</li>
        </ul>
        <!-- Some Info About Item -->
        <p class="text-center">
            -----------------------------------------------------------------
        </p>
        <div class="row">
            <!-- Item link here -->
            <a href="#0" class="btn waves-effect waves-light btn-primary custom-btn">Read Now</a>
        </div>
    </div>
</div>
<!-- ./1st publication -->

 

Blog Section

Change image, title, date, number, content, link of full pot in rounf button and your blog link in Visit My Blog button.

<!-- 1st blog post -->
<div class="col col-md-4 col-sm-12 col-xs-12">
    <div class="card blog" data-aos="fade-up" data-aos-delay="300">
        <!-- Blog image here -->
        <img class="img-responsive" src="images/blog/blog-image.jpg">
        <div class="blog-content">
            <!-- Edit title and info here -->
            <div class="blog-title">
                <h6 class="text-capitalize">Blog title will be placed here</h6>
                <ul>
                    <li><i class="ion-calendar"></i>date..........</li>
                    <li><i class="ion-heart"></i>number........</li>
                </ul>
                <!-- Add link of full post -->
                <a href="#0" class="btn-floating waves-effect waves-light btn-large more-btn custom-btn">
                    <i class="ion-android-more-horizontal"></i></a>
            </div>
            <!-- some line of post -->
            <p class="text-left">
                -----------------------------------------------
            </p>
        </div>
    </div>
</div>
<!-- ./1st blog post -->
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------

<div class="row text-center">
    <div class="col col-xs-12 col-sm-12 col-md-12 text-center">
        <a href="#0" target="_blank" class="text-uppercase visit-blog btn btn-large custom-btn waves-effect waves-light"
           data-aos="zoom-in" data-aos-delay="750">Visit My Blog</a>
    </div>
</div>

 

Clients Section

Change Client Picture, testimonial, name & status.

<!-- 1st Reference from Client -->
<div class="col col-md-12 col-sm-12 col-xs-12 swiper-slide">
    <div class="card clients-ref">
        <!-- Client Photo -->
        <div class="client-photo center-block">
            <img class="center-block" src="images/client/face.png">
        </div>
        <!-- Client Testimonial -->
        <blockquote class="text-center">
            --------------------------------------------------------------------------------
            <cite>&mdash; Name......., Status.........</cite>
        </blockquote>
    </div>
</div>
<!-- ./1st Reference from Client -->

Change logo image, and if you want you can add link with them through <a></a> tag.

<!-- Company Logo with Website LInk -->
<ul class="text-center">
    <li data-aos="fade-up" data-aos-delay="300"><a href="#0">
        <img class="img-responsive media-middle" src="images/client/logo.png" alt="">
    </a></li>
    ----------------------------------------
    ----------------------------------------
    ----------------------------------------
</ul>
<!-- ./Company Logo with Website LInk -->

 

Pricing Section

Change title value, features and button Actioon.

<div class="col col-md-3 col-sm-6 col-xs-12">
    <div class="card pricing-table" data-aos="fade-up" data-aos-delay="300">
        <!-- Table Name -->
        <h3 class="text-center">------------</h3>
        <h4 class="text-center">
            <span class="dollar">$</span>
            <!-- Enter Your Amount Here -->
            <span class="amount">-------</span>
            <span class="period">/mo or /yr</span>
        </h4>
        <!-- Features -->
        <ul class="feature-list text-center">
            <li>-----------------</li>
            <li>-----------------</li>
            <li>-----------------</li>
            <li>-----------------</li>
        </ul>
        <!-- ./Features -->
        <div class="row">
            <div class="col col-xs-12 col-sm-12 col-md-12 text-center">
                <a href="#0" class="btn waves-effect waves-light custom-btn">Buy Now</a>
            </div>
        </div>
    </div>
</div>

 

Interest Section

You can add some brief about your interest or can remove them, Change your interest icon and name.

<div class="col col-md-12 col-sm-12 col-xs-12">
    <!-- Some brief about your interest -->
    <p class="text-center">
        -------------------------------------
    </p>
</div>
<!-- Interest Topic Icon and Name -->
<ul class="col-md-12 col-sm-12 col-xs-12 text-center list-inline">
    <li class="interest-topic">
        <i class="ion-class............"></i>
        <span>--------------</span>
    </li>
    ---------------------------
    ---------------------------
    ---------------------------
    ---------------------------
</ul>
<!-- ./Interest Topic Icon and Name -->

 

Contact Section

Info Card

This is your contact info, replace the infos with yours.

<!-- Contact Info -->
<div class="col col-md-5 col-sm-6 col-xs-12">
    <div class="info card" data-aos="fade-up" data-aos-delay="300" data-aos-offset="0">
        <!-- Apply your own info here -->
        <ul class="text-center center-block">
            <li>
                <i class="ion-android-call center-block"></i>
                <span>+880 - 12345 - 67890</span>
            </li>
            <li>
                <i class="ion-ios-printer center-block"></i>
                <span>+880 - 12345 - 67890</span>
            </li>
            <li>
                <i class="ion-email center-block"></i>
                <span>emailid@domain.com</span>
            </li>
            <li>
                <i class="ion-earth center-block"></i>
                <span>websiteaddresslink.com</span>
            </li>
            <li>
                <i class="ion-ios-location center-block"></i>
                <span>Address..........</span>
            </li>
        </ul>
    </div>
</div>
<!-- ./Contact Info -->
Contact Form

For Contact form you need not to change any thing in HTML, in email-php folder, you will find the mail-handler.php file open that and just replace the given email with your webmail email address.

$mailto  = 'email@domainname.com';
Google Map

You also need not to change anythig from HTML for Google map just need to place an google map API key for your own site. GO to this link https://developers.google.com/maps/documentation/javascript/get-api-key And follow the instraction to get an API key For your Map. after getting you API key place it in the link shown bellow.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAP_API_KEY_HERE"></script>

After that, For changing your location open custom-map.js located in javascripts folder and replace the following. You can also control the zoom level of thee map.

$latitude = replace with yours............
$longitude = replace with yours...........
$map_zoom = 15;

Sources & Credits

Frontend Framework
Bootstrap - http://getbootstrap.com/
Materialize - http://materializecss.com/
Animation
AOS - http://michalsnik.github.io/aos/
Animate.css - https://daneden.github.io/animate.css/
Fonts & Icons
Google Font - https://fonts.google.com/
IonIcon Font - http://ionicons.com/
Font Awesome Icon Font - http://fontawesome.io/
Material Icon Font - https://design.google.com/icons/ 
Javascripts & Plugins:
jQuery - jquery-2.1.3.min.js
Filterizer - http://yiotis.net/filterizr/
retina.js - https://imulus.github.io/retinajs/
Swiper - http://idangero.us/swiper/#.V6b0y5h97Dc
Google Map API: https://maps.googleapis.com/maps/api/js
Other Sources
Images - https://unsplash.com/
Documenter - http://revaxarts-themes.com/documenter/
 
If You Love Our Work Then Do Not Forget to Give Us a 5 Star Reating.