AboutMe - Personal Portfolio Resume Template


  • Item: AboutMe
  • Demo: Please check Live Preview at Item Page AboutMe
  • Documentation Created: 20 October 2017
  • Documentation Latest Update: 8 September 2019
  • Author: MGScoder
  • email (for pre-purchase Query): salle@buy-landing.ru ( Purchase Code Required ) OR use Comments Tab On The Item Page

Item Support

Thank you for purchasing the Template. If you have any questions that are beyond the scope of this help file, please feel free to email us with mention Purchase Code ( Where Is My Purchase Code?) via my user page contact form here. You can also Ping Us through Item Support Tab (better and fast). Thanks so much!

AboutMe is a Full Responsive Personal Template built on Latest Version of Bootstrap Framework (v3.3.7), HTML5/CSS3 and JQuery. Its wonderful features can be used to develop any personal website for Designer, Freelancer, Engineer, Architect, photographer, Author, Writer, Bloger, Marketing Director, System Analyst, Technologist, Physician, Teacher, Technician, Consultant, Real Estate Broker, Chef, Dentist, Event Planner, Fashion Designer, Interior Designer, Web Designer, Journalist, Plumber or any other professional person. This template can be used to Showcase your personal Resume, Portfolio, Service, Team, Blog, Activity, Events, Books, App.

AboutMe has various Home Page styles with fully responsive design. Indeed, you will be able to showcase your content on mobile devices such as smart phones and tablets. It has many features like CSS3 and jQuery animations, portfolio filtering, testimonial, pricing tables, Working Ajax Contact and Quote Form and many other things which are easy to personalize. Google Map function integrated as well. All the codes are clean and well organized. Also have proper help documentation. It looks great with all types of devices. Try out the demo.

Features


  • W3C Valid HTML Code
  • HTML5 & CSS3
  • 100% Responsive & Mobile-Friendly Layout
  • Latest Version of Bootstrap
  • Smooth & Stunning Parallax
  • Smooth Scroll
  • Font Awesome icons
  • Sticky Navigation
  • Carousel Slider
  • various Home Page styles
  • Service Details Page
  • Blog Details Page
  • Portfolio Details Page
  • Parallax background
  • Mailchimp integrated Ajax Subscribe Form
  • PHP Working Ajax Contact Form with jQuery validation
  • PHP Working Ajax Quote Form with jQuery validation
  • Pricing Tables
  • Testimonial
  • Portfolio With Isotop filtaring
  • Lightbox
  • Google Fonts
  • Browser Compatibility
  • Fully Customizable
  • Clean Code
  • Well Documentation
  • Dedicated Support
  • and Much More!

Installation


After extract the main zip file, you'll see these folders and files:

  • aboutme >> Main theme folder
    • css >> css file folder
    • fonts >> icon fonts folder
    • images >> images folder
    • js >> javascript files folder
  • documentation >> help file folder

HTML FILES INCLUDED :

  • Landing Page
    • index.html >> Style 1
    • index-2.html >> Style 2
  • Details Pages
    • single-portfolio.html >> Portfolio Details Page
    • single-blog.html >> Blog Details Page with sidebar
    • single-service.html >> Service Details Page

PHP FILE INCLUDED :

  • contact-process.php >> Process Contact Form
  • quote-process.php >> Process Quote Form

HTML Structure


image

Add Section

image

CSS Structure


image

CSS Customization

In style.css you will find css for each section separately with comment so that you can customize it easily.

image

Javascript


image

Settings


To Change your logo:

Open the template folder, go to 'images' directory. You can upload your Logo with the same name and extension to replace the default ones.

if change your image name or extension

  1. Go to template folder & open .html file with your HTML editor.
  2. Find the logo.png from header section show on image below.(You can use the search tool CTRL+F)
  3. Edit logo name or extension and Save the file
image
Menu Structure:

You can add/remove menu from here

image
Font-awesome Icon

To change icon & it's size just change icon class name like fa-home, fa-envelope, fa-phone (see examples below). Find more on fontawesome & fontawesome examples

image
Social Icon

We have diffrent class name for diffrent style social icon like social-icon-small, social-icon-large, social-icon-light, social-icon-colored, social-icon-rounded etc. You can chose your class for your desire style. For medium icon you don't need add class 'social-icon-medium'. Flow example below

image

More Example

image
Rattings

You can change rattings like below

image
How to edit text

This template is HTML based template so all content is stored and could be accessed though the .html files.

  1. Go to template folder & open .html file with your HTML editor.
  2. Find the text you need.(You can use the search tool CTRL+F)
  3. Edit text in HTML editor. Save the file and open it with your Browser to see the changes.
How to change Images

Open the template folder, go to 'images' directory. You can upload your images with the same name and extension to replace the default ones.

To Change Background image:

Open the template folder, go to 'images' directory. You can upload new Background image with the same name and extension to replace the default one.

images-directory
Count Up Settings

Change Count Up Number:

  1. Go to template folder & open .html file with your HTML editor.
  2. Find the counter(You can use the search tool CTRL+F)
  3. Edit the Number in HTML editor. Save the file and open it with your Browser to see the changes.
image
Owl Carousel Setup

Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see what happens with Items.

image

View Documentation on OwlCarousel2 docs

How to set up mailchimp

Change YOUR MAILCHIMP ACCOUNT LIST FORM ACTION URL. To find those value please login into your mailchimp account

mailchimp-form
How to set up contact form receipent email and subject

Go to template folder & open contact-process.php file with your HTML editor and change receipent email and subject as you need. Please check the following screenshot image.

receipent email and subject
How to set up Video Background
video-bg-setup

Credits