Me Flat

One-Page Personal Portfolio / Bootstrap Template


View Online Demo
Version 1.3

Title & Favicons

Site Title

Open file /index.html with your favorite text editor and scroll to the very top of the file.

  1. <!-- ==============================================
  2. Title and Meta Tags
  3. =============================================== -->
  4. <meta charset="utf-8">
  5. <title>Me Flat | Flat Personal Portfolio</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <!-- ==============================================
  9. Favicons
  10. =============================================== -->
  11. <link rel="shortcut icon" href="assets/favicon.ico">
  12. <link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
  13. <link rel="apple-touch-icon" sizes="72x72" href="assets/apple-touch-icon-72x72.png">
  14. <link rel="apple-touch-icon" sizes="114x114" href="assets/apple-touch-icon-114x114.png">

Within the <head> tag you will find the <title> tag. Replace the text with your own Site Title.


Favicons

Right after the <title> you see the Favicons links. Normally you won't need to change the markup for these, leave it as it is and replace the coresponding images in the /assets/ folder with your own images, following these rules:

File Name Type Size
1 favicon.ico ICO 16 × 16
2 apple-touch-icon.png PNG 57 × 57
3 apple-touch-icon-72x72.png PNG 72 × 72
4 apple-touch-icon-114x114.png PNG 114 × 114

Note: DO NOT alter the filenames! Just make your own with your favorite image editor and replace them with the same filename.

Navigation

Right after the body tag you can see the Main Navigation links with the id site-nav. Change the text of the anchors and/or the destination section and use your name's initials for the logo.

  • <div id="site-nav" class="navbar-collapse collapse">
  •     <ul class="nav navbar-nav">
  •         <li>
  •             <a href="#services" class="scrollto">What I Do</a>
  •         </li>
  •         <li>
  •             <a href="#about" class="scrollto">About Me</a>
  •         </li>
  •         <li id="logo">
  •             <a href="#home" class="scrollto">
  •                 <h1>J<span>D</span></h1>
  •             </a>
  •         </li>
  •         <li>
  •             <a href="#portfolio" class="scrollto">My Works</a>
  •         </li>
  •         <li>
  •             <a href="#contact" class="scrollto">Contact Me</a>
  •         </li>
  •     </ul>
  • </div><!--End navbar-collapse -->

Class scrollto is used to make the page scroll to the destination. You can add it to any link or button linking to a part of the page to have that effect. Obviously there is no reason to add it to an external link!

About & Skills

About

Scroll to the ABOUT section.

  • <!-- ==============================================
  • ABOUT
  • =============================================== -->    
  • <section id="about" class="dark-bg light-typo padding-top-bottom">
  •     <div class="container">
  •     
  •         <header class="section-header text-center">
  •         
  •             <h1>About Me</h1>
  •         
  •         </header>
  •         
  •         <div class="row">
  •         
  •             <div class="col-sm-8 col-sm-offset-2">
  •             
  •                 <img class="img-responsive img-center img-circle" src="assets/about.jpg" alt="" />
  •         
  •                 <p class="text-center">Cras convallis nunc vitae massa convallis fermentum. Fusce feugiat, sem at congue rutrum, nisl mauris facilisis tellus, vel interdum nulla enim at purus. Integer metus justo, pellentesque ac bibendum a, dapibus sed nisl. Donec vitae suscipit lacus. Vivamus lacinia nisi eget erat luctus, id mollis nunc molestie. </p>
  •             
  •             </div>
  •             
  •         </div>
  •         
  •         <p class="text-center"><a class="btn btn-meflat scrollto white icon-left" href="#contact"><i class="fa fa-arrow-down"></i>Hire Me</a></p>
  •         
  •     </div>
  • </section>

  1. Change the image by changing the src="" attribute to point to your own image or just replace the about.jpg image in the assets/ folder. By default this image is 280×280 pixels but you can use a larger or smaller one.

  2. Change the markup of the about section to write a small story about you, with some links or buttons as seen. It's on you!


Skills

Scroll to the SKILLS section.

  • <!-- ==============================================
  • SKILLS
  • =============================================== -->    
  • <section id="skills" class="white-bg">
  •     <div class="container">
  •     
  •         <div class="row skills">
  •             
  •             <h1 class="text-center">I Got the Skills</h1>
  •             
  •             <div class="col-sm-6 col-md-3 text-center">
  •                 <span class="chart" data-percent="80"><span class="percent">80</span></span>
  •                 <h2 class="text-center">Web Design</h2>
  •             </div>
  •             <div class="col-sm-6 col-md-3 text-center">
  •                 <span class="chart" data-percent="70"><span class="percent">70</span></span>
  •                 <h2 class="text-center">HTML / CSS</h2>
  •             </div>
  •             <div class="col-sm-6 col-md-3 text-center">
  •                 <span class="chart" data-percent="60"><span class="percent">60</span></span>
  •                 <h2 class="text-center">Graphic Design</h2>
  •             </div>
  •             <div class="col-sm-6 col-md-3 text-center">
  •                 <span class="chart" data-percent="90"><span class="percent">90</span></span>
  •                 <h2 class="text-center">UI / UX</h2>
  •             </div>
  •             
  •         </div><!--End row -->
  •     
  •     </div>
  • </section>

  1. Change the title of each skill in the <h2> headings.

  2. Change the percentage of each skill by changing the value of the data-percent="" attribute as well as the text of the .percent span.

Portfolio

Filtering Projects

Scroll to the PORTFOLIO section and find the Portfolio Filters subsection. This is where the Portfolio Categories go, to give the filtering effect to the masonry project blocks.

  • <!--==== Portfolio Filters ====-->
  • <div id="filter-works">
  •     <ul>
  •         <li class="active">
  •             <a href="#" data-filter="*">All</a>
  •         </li>
  •         <li>
  •             <a href="#" data-filter=".web-design">Web Design</a>
  •         </li>
  •         <li>
  •             <a href="#" data-filter=".icons">Icons</a>
  •         </li>
  •         <li>
  •             <a href="#" data-filter=".ui-kits">UI Kits</a>
  •         </li>
  •     </ul>
  • </div><!--End portfolio filters -->

  1. Change the text of <a> anchors to match your own categories. Delete or add more to have as many as you need. Leave the class active to the first list item, as when the window loads all projects will be visible.

  2. Change the value of the data-filter="" attribute to match the categories you entered above. DO NOT forget the dot (.), cause these data will be used as classes next.


Note: If for some reason you don't want to have the filtering effect, but you want to always show all of your projects, just delete the entire div#filter-works.


Single Projects

Right after the Portfolio Filters section you see the SINGLE PROJECT ITEM section. As you can see the markup consists of two parts:

The Main markup. This is what is being seen initially. An article with the project thumb and a hover mask with the project title and subtitle. You should not alter this markup, unless you know what you are doing.

  • <!-- ==============================================
  • SINGLE PROJECT ITEM
  • =============================================== -->    
  • <article class="project-item web-design">
  •     
  •     <img class="img-responsive project-image" src="assets/placeholder-320x210.jpg" alt=""><!--Project thumb -->
  •     
  •     <div class="hover-mask">
  •         <h2 class="project-title">Project Title</h2><!--Project Title -->
  •         <p>Subtitle</p><!--Project Subtitle -->
  •     </div>
  •     
  •     ...
  •     
  • </article>
  • <!-- ==============================================
  • END PROJECT ITEM
  • =============================================== -->
  1. Category Classes: Give the project the suitable category class(es) from those in filters, for the project to belong in one (or more) category. DO NOT delete the project-item class.

  2. Project Thumb: Provide the path to the project thumb in the src attribute of the img tag. Don't alter it's classes.

  3. Project Title: Within the hover-mask div, change the text of the project title. Do the same for the subtitle, show something like the client or a small description. Project subtitle is optional, but Title is not as this is going to be used in the Project Preview as well.


The Project Preview markup. This is what is going to show in the Project Preview modal window. You are free to alter this markup as you like, leaving just the classes sr-only and project-description as is.

  • <!--==== Project Preview HTML ====-->
  • <div class="sr-only project-description"
  •     data-category="Category"
  •     data-date="Date"
  •     data-client="Client"
  •     data-link="www.example.com,http://www.google.com"
  •     data-descr="A small description goes here."
  •     data-images="assets/placeholder-750x430.jpg,assets/placeholder-750x430.jpg"
  • >
  •     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
  •     <img class="img-responsive img-center" src="assets/projects/google-logo.png" alt="">
  •     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien risus, blandit at fringilla ac, varius sed dolor. Donec augue lacus, vulputate sed consectetur facilisis, interdum pharetra ligula. Nulla suscipit erat nibh, ut porttitor nisl dapibus eu.</p>
  •     <p>Nam eget urna pellentesque nisl ultrices dapibus. Mauris accumsan vehicula nisl, sed tempus mauris facilisis eu. Donec a iaculis nisi, quis malesuada justo. Pellentesque ut enim sit amet ipsum dignissim egestas. Morbi tincidunt rhoncus urna eget placerat.</p>
  •     <p class="text-right"><a class="btn btn-meflat icon-right" href="#external-link">Visit Website<i class="fa fa-arrow-right"></i></a></p>
  • </div>

Project attributes. All project attributes except from the slider images are optional and are going to appear in the project sidebar.

Data Description
1 data-images Required The images for the Project Slider separated by commas. Size should be 750 by 430 pixels.
2 data-category Optional The category of the project.
3 data-date Optional The date of the project.
4 data-client Optional The client the project was done for.
5 data-link Optional The link text and the actual link separated by commas.
6 data-descr Optional A small description of the project.

Project Preview Modal

Right after the end of the projects you can see the markup for the Project Preview modal window.

  • <!-- ==============================================
  • PROJECT PREVIEW MODAL (Do not alter this markup)
  • =============================================== -->    
  • <div id="project-modal" class="modal fade">
  •     <div class="modal-dialog">
  •     
  •         <div class="modal-content">
  •         
  •             <div class="modal-header">
  •             
  •                 <div class="container">
  •                 
  •                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  •                     
  •                     <h1 id="hdr-title" class="text-center"></h1>
  •                     <div class="row">
  •                         <div class="col-md-8 col-md-offset-2">
  •                             <div class="image-wrapper">
  •                                 <img class="img-responsive" src="assets/chrome.png" alt="">
  •                                 <div class="loader"></div>
  •                                 <div class="screen"></div>
  •                             </div>
  •                         </div>
  •                     </div>
  •                 </div>
  •                 
  •             </div>
  •             
  •             <div class="modal-body">
  •                 <div class="container">
  •                     <div class="row">
  •                         <div id="project-sidebar" class="col-md-3">
  •                             <h2 id="sdbr-title"></h2>
  •                             <p id="sdbr-category"></p>
  •                             <p id="sdbr-date"></p>
  •                             <p id="sdbr-client"></p>
  •                             <p id="sdbr-link"><a href="#link" target="_blank"></a></p>
  •                             <p id="sdbr-descr"></p>
  •                         </div>
  •                         <div id="project-content" class="col-md-8 col-md-offset-1">
  •                         </div>
  •                     </div>
  •                     
  •                 </div>
  •                 
  •             </div><!-- End modal-body -->
  •             
  •         </div><!-- End modal-content -->
  •         
  •     </div><!-- End modal-dialog -->
  •     
  • </div><!-- End modal -->

DO NOT alter this markup at all. This is the necessary markup for the Project Preview modal window. It's empty and it fills with the content provided above for every single project, everytime user clicks on the project thumb.

Contact Form

Scroll to the CONTACT section and find Contact Form subsection.

  • <form id="contact-form" class="bl_form text-center" action="contact.php" method="post" novalidate>
  •     <span class="field-wrap">
  •         <label class="control-label" for="contact-name">Name</label>
  •         <input id="contact-name" name="contactName" type="text" class="label_better requiredField" data-new-placeholder="Name" placeholder="Name" data-error-empty="*Enter your name">
  •     </span>
  •     <span class="field-wrap">
  •         <label class="control-label" for="contact-mail">Email</label>
  •         <input id="contact-mail" name="email" type="email" class="label_better requiredField" data-new-placeholder="Email Address" placeholder="Email Address" data-error-empty="*Enter your email" data-error-invalid="x Invalid email address">
  •     </span>
  •     <span class="field-wrap">
  •         <label class="control-label" for="contact-message">Message</label>
  •         <textarea id="contact-message" name="comments" rows="1" class="label_better requiredField" data-new-placeholder="Message" placeholder="Message" data-error-empty="*Enter your message"></textarea>
  •     </span>
  •     
  •     <p class="text-center"><button name="submit" type="submit" class="btn btn-meflat icon-left" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="fa fa-location-arrow"></i>Send Message</button></p>
  •     <input type="hidden" name="submitted" id="submitted" value="true" />
  •     
  • </form>

  1. For each form input change the label text and placeholder as needed.

  2. Then change the value of the data- attributes, that will be used by the label animating script and the validation script, for each input and button as described below.


Data Element Description
1 data-new-placeholder All inputs Animating label text.
2 data-error-empty All inputs Error message if input has left empty.
3 data-error-invalid email input Error message if email is invalid.
4 data-error-message button Button text if form contains errors.
5 data-sending-message button Button text if form is validated and message is beeing sent.
6 data-ok-message button Button text when the message has been sent.

MAKE CONTACT FORM WORK

Open contact.php file with your favorite text editor.

Normally the only things you want to change are your email and your site's title for the autoresponder message. So, at the very top of the file change the value of those two variables.

  • <?php
  • $emailTo = 'yourmail@example.com';
  • $siteTitle = 'YourSiteTitle';
  • ...

That's it. Now the contact script will send the message user has entered to your email and an autoresponse to his email.

Tip: If you don't want to send an autoresponse just scroll down to the bottom of the file and comment this line:

  • mail($email, $respondSubject, $respondBody, $respondHeaders);

FURTHER CUSTOMIZATION

WARNING: Make sure you know what you are doing before proceeding to the following customizations!

Scroll to the bottom of the contact.php file and within the if(!isset($hasError)) conditional statement. This is where the messages are beeing sent to you and the user.

  • // upon no failure errors let's email now!
  • if(!isset($hasError)) {
  •     
  •     $subject = 'New message to '.$siteTitle.' from '.$name;
  •     $sendCopy = trim($_POST['sendCopy']);
  •     $body = "Name: $name \n\nEmail: $email \n\nMessage: $comments";
  •     $headers = 'From: ' .' <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;
  •     mail($emailTo, $subject, $body, $headers);
  •     
  •     //Autoresponse
  •     $respondSubject = 'Thank you for contacting '.$siteTitle;
  •     $respondBody = "Your message to $siteTitle has been delivered! \n\nWe will answer back as soon as possible.";
  •     $respondHeaders = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $emailTo;
  •     
  •     mail($email, $respondSubject, $respondBody, $respondHeaders);
  •     
  •     // set our boolean completion value to TRUE
  •     $emailSent = true;
  • }

Change the structure and/or the text of the messages as you like to suit your needs.


Theme Colors

Me Flat comes with 12 predefined color schemes.
To use the one you like just replace the meflat-light-green.css file with the one of your choice.

  • <!-- ==============================================
  • CSS
  • =============================================== -->
  • <link rel="stylesheet" href="css/bootstrap.css">
  • <link rel="stylesheet" href="css/font-awesome.css">
  • <link rel="stylesheet" href="css/flexslider.css">
  • <link rel="stylesheet" href="css/meflat-light-green.css">

Color CSS Filename
1 meflat-red.css
2 meflat-orange.css
3 meflat-yellow-orange.css
4 meflat-yellow.css
5 meflat-grass.css
6 meflat-green.css
7 meflat-light-green.css
8 meflat-cyan.css
8 meflat-blue.css
8 meflat-cyan2.css
8 meflat-purple.css
8 meflat-pink.css

Scrolling Animations

As you scroll the page you 'll notice that several components are beeing animated when you reach them.
To make a component animate just add the class scrollimation and one of the effects classes, as seen below.

  • ...
  • <div class="row services scrollimation fade-left">
  • ...

Currently available effects are:

Effect Class Description
1 scale-in The component scales up while fading in. This effect is used on service items.
2 fade-in The component fades in. This effect is used in Twitter section.
3 fade-left The component is animating from right to left while fading in. This effect is used on the third team member.
4 fade-right The component is animating from left to right while fading in. This effect is used on the first team member.
5 fade-up The component is animating from bottom to top while fading in. This effect is used on section headers.

Add delay to an animation using the d1,d2,d3,d4 classes as seen below.
This is usefull for multiple animations on the same line like the social links on the demo.

  • ...
  • <div class="... scrollimation scale-in d1">
  • ...

Currently available delay classes are:

Effect Class Description
1 d1 Adds 200ms of delay.
2 d2 Adds 400ms of delay.
3 d3 Adds 600ms of delay.
4 d4 Adds 800ms of delay.

THE END!

Once again thank you for purchasing this template.
If you have any questions that are beyond the scope of this documentation feel free to contact us via email:
support@q-themes.net.
*Do not forget to include your Licence ID, so we can verify your purchase!


Go to top.