Matresume
By: Hencework
Support: contact@hencework.com
Thank you for purchasing our theme. If you have any questions that aren’t covered in this article, please mail us at contact@hencework.com
Matresume – Material Design Resume / CV / Portfolio / vCard / Profile HTML Template – A premium template to promote yourself. Perfect for Business Analysts, Developers, Designers, Artists, Marketing, Consulting, copy writers, specialists, experts, managers, instructional design, sales managers, creative people and universally for all. Ideal template for display information about your experience, skills, education, works, awards and expertise. You can add and manage blog in your page as well. Easily customizable material design using modern technologies like Angular js & bootstrap Sass. Mobile first design (fully responsive) of matresume makes it a perfect choice.
FEATURES
- Powered by: HTML5 I CSS3 I jQuery I Sass I Bootstrap v3.3.6 I Angular js I Material Design Lite
- Code: Semantically Correct I HTML5 Validated I Fully Optimized I Well Commented
- Cross Browser Support: Internet Explorer 8+ I Firefox I Safari I Opera I Chrome
- Layout: Mobile First Layout I Fully Responsive I Minimal and Clean Material Design
- Fonts: Material Icon Font I Google Web Fonts
- Pages: Home Page, Blog List, Blog Detail Post – Vimeo, Youtube, Image, Slider, Audio & Project Detail
- External Support: Youtube I Vimeo Video I Google Map
- Setting panel: Dark & Light Versions I Header Full width & Boxed I Layout Full width & Boxed I Hero Background Options
- Isotope jQuery Plugin – $25 Value! (Filterable Popup Preview Portfolio)
- Light gallery with running slideshow & fullscreen functionality
- Availability Calender widget
- Working AJAX Contact Form powered by angular js
- Easy to Use and customizable
- Free & Friendly 24x7 Support
- SEO Optimized
- Well documented
Files
All site files are divided into following folders.
css folder - Contains css files
scss folder - Contains sass file
js folder - Contains Javascript files
img folder - Contains all images
phpmailer folder - Contains all Contact Form related files.
lib folder - Contains mailchimp.php file
fonts folder - Contains "material icon" fonts
For more details please go through 'Read Me' text file present inside root directory.
Customization Options
You can change the layout of page adding some classes to the wrapper div
Please add .box-layout class with .main-wrapper for box layout.
Please add .dark-mode class with .main-wrapper for dark background option.
Please add .full-width-header class with .mdl-layout__header for full width header.
Please add folllowing classes seprately with .bg-struct class for different hero bg image
.bg-img ,.bg-img-2 ,.bg-img-3 ,.bg-img-4
Please add folllowing classes seprately with .bg-struct class for different hero bg patterns
.bg-pattern-1 ,bg-pattern-2 ,.bg-pattern-3 ,.bg-pattern-4
Please add folllowing classes seprately with .bg-struct class for different hero bg abstract
.bg-abstract-1 ,bg-abstract-2 ,.bg-abstract-3 ,.bg-abstract-4
Please add folllowing classes seprately with .bg-struct class for different hero bg colors
.bg-green ,bg-blue ,.bg-red ,.bg-yellow
Availibility Calendar
You can fix the not available days in calendar code present in init.js
/***** Availablity Calendar Start*****/
var d = new Date();
var n = d.getFullYear();
var notAvailableDates = ['01-05-'+n+'','02-07-2017','02-04-2017','01-01-2017'];
$("", { "id":"datepicklayer"}).appendTo("body");
$('#datepicker1').datepicker({
showAnim: 'show',
dayNamesMin: [ "S", "M", "T", "W", "T", "F", "S" ],
beforeShowDay: function(d) {
var dmy = (d.getMonth()+1);
if(d.getMonth()<9)
dmy="0"+dmy;
dmy+= "-";
if(d.getDate()<10) dmy+="0";
dmy+=d.getDate() + "-" + d.getFullYear();
if ($.inArray(dmy, notAvailableDates) != -1) {
return [false, "","notAvailableDates"];
} else{
return [true,"","Available"];
}
}
});
$(document).on('click', '#datepickopn', function () {
$('.datepicker').addClass('datepicker-open');
$('#datepicklayer').show();
});
$(document).on("click", "#datepicklayer", function() {
$('.datepicker').removeClass('datepicker-open');
$(this).hide();
});
/***** Availablity Calendar End*****/
Portfolio
Portfolio content can be changed from the code below. Code is present inside index.html
js is present inside the js/init.js folder.
/***** LightGallery init start *****/
$(document).on('click', '#goto_box_1', function (e) {
e.preventDefault();
$(this).lightGallery({
dynamic: true,
thumbnail: false,
hash:false,
autoplay:true,
dynamicEl: [{
"poster": 'img/gallery1.jpg',
"html":'#video1',
'subHtml': 'Fading Light
Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.
'
}, {
'src': 'img/gallery2.jpg',
'subHtml': "Bowness Bay
A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....
"
}]
})
});
...
$(document).on('click', '#goto_box_6', function (e) {
e.preventDefault();
$(this).lightGallery({
dynamic: true,
thumbnail: false,
hash:false,
autoplay:true,
dynamicEl: [{
'src': 'https://www.youtube.com/watch?v=Pq9yPrLWMyU',
'poster': 'img/gallery6.jpg',
'subHtml': "Coniston Calmness
Beautiful morning
"
}, {
'src': 'img/gallery6.jpg',
'subHtml': "Bowness Bay
A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....
"
}]
})
});
/***** LightGallery init end*****/
Contact Form
Contact content can be changed from the code below. Code is present inside index.html
contact
Hey There, happy to hear from you.
{{ resultMessage }}
php code is present inside the contact-form.php file
//create an instance of PHPMailer
$mail = new PHPMailer();
$mail->From = $_POST['inputEmail'];
$mail->FromName = $_POST['inputName'];
$mail->AddAddress('themenerds@gmail.com'); //recipient
$mail->Subject = 'Enquiry from Dexter';
$mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\nMessage: " . stripslashes($_POST['inputMessage']);
Google Map
Please open init.js file and find below snippet
/* Map initialization js*/
if( $('#map_canvas').length > 0 ){
zoom: 11,
center: new google.maps.LatLng(40.6700, -73.9400),
styles:[
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
-----
-----
var companyPos = new google.maps.LatLng(40.6700, -73.9400);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
title:"Our Office",
zIndex: 3});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});
}
here you can change lang and lat and also the marker img.
For gmap API key please follow the below steps:
- login to gmail account
- go to the following link https://developers.google.com/maps/documentation/javascript/get-api-key
- click on get a key button
- create project name and get api key ( src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxXt2P7-U38bK0xEFIT-ebZJ1ngK8wjww")
- copy that api key and paste on old api which present in index file.
- login to gmail account
- go to the following link https://developers.google.com/maps/documentation/javascript/get-api-key
- click on get a key button
- create project name and get api key ( src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxXt2P7-U38bK0xEFIT-ebZJ1ngK8wjww")
- copy that api key and paste on old api which present in index file.
Sources & Credits
Getmdl
https://getmdl.io/components/index.html
Twitter Bootstrap framework
http://getbootstrap.com/
Fonts
http://www.google.com/fonts
Icons
http://zavoloklom.github.io/material-design-iconic-font/icons.html
Icons
https://material.io/icons/
JQuery
http://jquery.com
Images
https://unsplash.com/
http://www.pexels.com/
Thanks
Once again, thank you so much for purchasing this theme.
If you have any questions that aren’t covered in this article, please feel free to contact us at contact@hencework.com
Don’t forget to rate this template, it helps us improve our products.