SpirIT

Features

This template has everything that you need to easy develop minimal and modern portfolio:

  • Semantically Correct / Valid HTML Code
  • Bootstrap 4.0 and jQuery powered
  • Fully Responsive Layout
  • Cross browser compatible (Internet Explorer 8+, Firefox, Safari, Opera, Chrome etc.)
  • 2 color schemes
  • Filterable + Popup Preview Portfolio
  • Working AJAX Contact Form with validation
  • Easy to Use and Customize
  • Google Web Fonts

Project Structure

Template has the following project structure:

  • documentation
  • template
    • assets
      • css
      • fonts
      • img
      • js
      • scss
    • index.html
    • blog.html
    • mail.php

HTML Structure

All the html code is placed in two files: index.html and blog.html. Feel free to edit it to reach the result you want to get. Html-files use UTF-8 codepage. Use the editor with UTF-8 support to avoid problems with unreadable symbols.

Head

Tags with metainformation are located inside <head> tag. Fill them to provide information about your CV to search engines:

<meta name="description" content="">
<meta name="author" content="">

Also there is <title> tag which you can edit too:

<title>SpirIT 2.0</title>

You can choose one of two finished color schemes. Just write "color.css" or "monochrome.css" here:

<link rel="stylesheet" href="assets/css/color.css">

Navigation Panel

The whole navigation panel is placed in <div class="menu"> and <div class="mobile-menu d-lg-none"> tags. The items of navigation panel look just like this:

<li><a href="#hello">Hello</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimonials">testimonials</a></li>
<li><a href="#blog">blog</a></li>
<li><a href="#contact">Contact</a></li>

You can easy change items and add new.

Header

All main personal information is located inside <header class="main-header" style="background-image: url(assets/img/img_bg_header.jpg)">. You can change all content here: background, avatar, name, contacts and social links.

Name and description:

<p class="personal-profile__name">John Anderson_</p>
<p class="personal-profile__work">frontend developer, QA-engineer</p>

Basic information and contacts:

<div class="personal-profile__contacts">
  <dl class="contact-list contact-list__opacity-titles">
    <dt>Age:</dt>
    <dd>23</dd>
    <dt>Phone:</dt>
    <dd><a href="tel:82344563333">8 (234) 456-33-33</a></dd>
    <dt>Email:</dt>
    <dd><a href="mailto:mail@mail.com">mail@mail.com</a></dd>
    <dt>Address:</dt>
    <dd>Melbourne Victoria 3000 Australia</dd>
  </dl>
</div>

We used FontAwesome font for social icons. But you can use Material Design Icons instead them. Social links section looks like this:

<p class="personal-profile__social">
  <a href="" target="_blank"><i class="fa fa-github"></i></a>
  <a href="" target="_blank"><i class="fa fa-linkedin-square"></i></a>
  <a href="" target="_blank"><i class="fa fa-facebook-square"></i></a>
</p>

Hello

Write a little about yourself and your skills in <div id="hello" class="container section"> tag. Also don't forget to add a link to your CV here:

<a href="" class="section_btn site-btn"><img src="assets/img/img_btn_icon.png">Download CV</a>

Resume

Resume is located inside <div id="resume" class="container section"> tag.

Education and employment

Education and employment block are same. For example education block looks like this:

<div class="row">
  <div class="col-md-8 section__resume resume-list">
    <p class="resume-list_title">education</p>
    <div class="resume-list__block">
      <p class="resume-list__block-title">University of Minnesota Twin Cities </p>
      <p class="resume-list__block-date">2006 - 2010</p>
      <p>Bachelor Computer Engineering Lorem</p>
    </div>
    ...
    <div class="resume-list__block" ...>
  </div>
</div>

You can add <div class="resume-list__block"> as many as you want.

Skills

The block of skills consists of progress bars: 

<div class="row section__resume progress-list js-progress-list">
  <div class="col-md-12">
    <p class="progress-list__title">general skills</p>
  </div>
  <div class="col-md-5 mr-auto">
    <div class="progress-list__skill">
      <p><span class="progress-list__skill-title">html5</span>
         <span class="progress-list__skill-value">80%</span></p>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="80"
             aria-valuemin="0" aria-valuemax="100">
        </div>
      </div>
    </div>
    ...
    <div class="progress-list__skill"...>
  </div>
  <div class="col-md-5 mr-auto">
    <div class="progress-list__skill"...>
    ...
    <div class="progress-list__skill"...>
  </div>
</div>

Mind that skill value in percents is set in aria-valuenow attribute. Change it corresponding to your skill level.

Portfolio

Portfolio consists of cards and filter menu. Think about categories and cards' content longer. They are very important for good portfolio.

Project card

Think up description and find good images to attract attention. Then add them in <div class="portfolio-cards">:

<div class="portfolio-cards">
  <div class="row project-card" data-toggle="modal" data-target="#portfolioModal"
       data-portfolio-tag="web-sites">
    <div class="col-md-6 col-lg-5 project-card__img">
      <img class="" src="assets/img/img_project_1_mono.png">
    </div>
    <div class="col-md-6 col-lg-7 project-card__info">
      <p class="project-card__title">Mobile and desktop app for London hostel store</p>
      <p class="project-card__description">
        Do answered bachelor occasion in of offended no concerns. Supply worthy warmth branch
        of no ye. Though wished merits or be. Alone visit use these smart rooms ham.</p>
      <p class="project-card__stack">Used stack:</p>
      <ul class="tags">
        <li>html5</li>
        <li>css3</li>
        <li>JavaScript</li>
        <li>bower</li>
        <li>grunt</li>
      </ul>
      <a href="" class="project-card__link">www.superapp.com</a>
    </div>
  </div>
  ...
  <div class="row project-card"  data-toggle="modal" data-target="#portfolioModal"
       data-portfolio-tag="landing-pages"...>
</div>

Change src attribute in <img> tag, write title in <p class="project-card__title"> tag and description in <p class="project-card__description"> . And don't forget to change tags in <ul class="tags"> and link in <a href="" class="project-card__link">. Don't write too much information in description because you can do it in modal later.

Modal

Example of modal is located at the end of index.html. You need to create unique modal for every project card. At first you need to think up value of id attribute and write it in data-target attribute of the relevant card: 

<div class="row project-card" data-toggle="modal" data-target="#portfolioModal"
     data-portfolio-tag="web-sites">

Then create new modal using new id:

<div class="modal fade portfolio-modal" id="portfolioModal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body col-md-11 col-lg-9 ml-auto mr-auto">
        <p class="portfolio-modal__title">Mobile and desktop app for London hostel store</p>
        <img class="portfolio-modal__img" src="assets/img/img_project_1_mono.png">
        <p class="portfolio-modal__description">Description of your project here.</p>
        
        <div class="portfolio-modal__link">
          <a href="">www.superapp.com</a>
        </div>
        <div  class="portfolio-modal__stack">
          <p class="portfolio-modal__stack-title">Using stack:</p>
          <ul class="tags">
            <li>html5</li>
            ...
            <li>grunt</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Change title in <p class="portfolio-modal__title"> tag and then add text and images to fill content of modal. Use <img class="portfolio-modal__img" src="assets/img/img_project_1_mono.png"> and <class="portfolio-modal__description"> for it. Also change link in <class="portfolio-modal__link"> tag and tags in <ul class="tags">.

Filter

Filter of cards is placed above them. You can delete, edit and add different categories to filter cards:

<div class="row portfolio-menu">
  <div class="col-md-12">
    <nav>
      <ul>
        <li><a href="" data-portfolio-target-tag="all">all</a></li>
        <li><a href="" data-portfolio-target-tag="mobile apps">mobile apps</a></li>
        <li><a href="" data-portfolio-target-tag="web-sites">web-sites</a></li>
        <li><a href="" data-portfolio-target-tag="landing-pages">landing pages</a></li>
      </ul>
    </nav>
  </div>
</div>>

Value of data-portfolio-target-tag attribute must be equal to value of data-portfolio-tag here:

<div class="row project-card" data-toggle="modal" data-target="#portfolioModal"
      data-portfolio-tag="web-sites">

Testimonials

Testimonials are pleced in <div id="testimonials" class="section">. Slider-carousel is used here. All testimonials are placed in <div class="carousel-inner" role="listbox"> tag:

<div class="carousel-inner" role="listbox">
  <div class="carousel-item active">
    <div class="row">
      <div class="col-md-10 col-sm-10 col-10 mr-auto ml-auto">
        <p class="slider-carousel__title">Antonio Anderson</p>
        <p class="slider-carousel__caption">Project: Landin page for travel company</p>
        <hr>
        <p class="slider-carousel__description">Up or well must less rent read walk so be. Easy
          sold at do hour sing spot. Any meant has cease too the decay. </p>
      </div>
    </div>
  </div>
  <div class="carousel-item"...>
  ...
  <div class="carousel-item"...>
</div>

Warning: The .active class need to be added to one of the .carousel-item!

Also amount of li in <ol class="carousel-indicators"> tag must be equal to amount of .carousel-item.

Blog

You have opportunity to create your own blog. <div id="blog" class="container section"> tag has only cards with links to other pages with your latest (or more popular/interesting/etc.) articles. You can find example of page with article in blog.html. Structure of post cards look like this:

<div class="row post-cards">
  <div class="col-md-4">
    <a href="blog.html">
      <div class="post-cards__card">
        <div class="post-cards__img">
          <img src="assets/img/img_blog_1.png">
        </div>
        <div class="post-cards__info">
          <p class="post-cards__date">October 22, 2017</p>
          <p class="post-cards_title">How to use css-preprocessor</p>
          <p class="post-cards_description">Lorem ipsum dolor sit amet, consectetur
            adipisicing elit, sed do eiusmod tempr incididunt...
          </p>
        </div>
      </div>
    </a>
  </div>
  <div class="col-md-4"...>
  <div class="col-md-4"...>
</div>

Fill all information and preview image and provide a link. More about creating article's page in "Article" chapter.

Contact

The contact block contains your contacts, links to other services and contact form. It is placed in <div id="contact" class="container section"> tag. You can edit your contact list here:

<div class="contacts__list">
  <dl class="contact-list">
    <dt>Phone:</dt>
    <dd><a href="tel:82344563333">8 (234) 456-33-33</a></dd>
    <dt>Skype:</dt>
    <dd><a href="skype:iamivanovivan">iamivanovivan</a></dd>
    <dt>Email:</dt>
    <dd><a href="mailto:mail@mail.com">mail@mail.com</a></dd>
  </dl>
</div>

And social links here:

<div class="contacts__social">
  <ul>
    <li><a href="">Facebook</a></li>
    <li><a href="">Linkedin</a></li>
    <li><a href="">GitHub</a></li>
    <li><a href="">Bitbucket</a></li>
  </ul>
</div>

Set up mail.php script to send e-mails on your address by providing your email address in following variable: $emailTo = "email@sitename.com". That’s it. Now contact form is working. Of course, if you set up PHP on your server right.

Article

You can create your own articles using example in blog.html. This html-file has same navigation and contact block in index.html. But also blog.html has article block and and block with other posts.

Article

All content of article is placed in <div class="article"> tag and har next structure:

<div class="article">
    <div class="row">
        <div class="col-md-12">
            <a class="article__back-link" href="index.html"><i class="fa fa-long-arrow-left"
               aria-hidden="true"></i>Back</a>
            <p class="article__title">How I organize my work with code</p>
            <p class="article_date">April, 20, 2017</p>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                labore et dolore magna aliqua. </p>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                labore et dolore magna aliqua.Excepteur sint occaecat cupidatat, culpa qui:</p>
            <figure>
                <img src="assets/img/img_article_photo.jpg">
                <figcaption>This is how I organize my HTML, CSS and PHP files</figcaption>
            </figure>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                labore et dolore magna aliqua. </p>
            <p class="article__share">Share this post:
                <a><i class="fa fa-linkedin-square"></i></a>
                <a><i class="fa fa-facebook-square"></i></a>
            </p>
        </div>
    </div>
</div>

Change title (<p class="article__title">) and date (<p class="article_date">), fill content and add share-links (<p class="article__share">.

Other posts

You can add links to other articles in <div id="posts" class="container section">:

<div class="row posts">
    <div class="col-md-5 mr-auto">
        <div class="posts__item">
            <a href="">
                <p class="posts__title">What’s new in the IT Industry?</p>
                <p class="posts__description">Invitation excellence imprudence understood it.
                    Ye show done an into.</p>
            </a>
        </div>
        ...
        <div class="posts__item"...>
    </div>
    <div class="col-md-5 mr-auto">
        <div class="posts__item"...>
        ...
        <div class="posts__item"...>
    </div>
</div>

Edit title and description and of course don't forget add link (<a href="">).

CSS Structure

There are 3 css-files:

  • template
    • assets
      • css
        • color.css
        • main.css
        • monochrome.css

color.css and monochrome.css are color schemes of template. We recommend create new css-file if you want change styles using only CSS.

main.css is file which you can use to edit styles with help Sass. How do it here.

Fonts

This template has some Google Fonts: Roboto, Roboto Mono and Inconsolata - and FontAwesome and Material design icons for icons.

To edit them in css is pretty complicated task. So we recommend to edit .scss files for this.

JavaScript

All the js-files are placed here:

  • template
    • assets
      • js
        • bootstrap.min.js
        • contact.js
        • jquery.waypoints.js
        • mbclicker.min.js
        • menu.js
        • mobile-menu.js
        • popper.min.js
        • portfolio-filter.js
        • progress-list.js
        • section.js
        • site-btn.js
        • slider-carousel.js

bootstrap.min.js -for Bootstrap 4.0.
contact.js - validation form.
jquery.waypoints.js - for calling code while scrolling the page.
mbclicker.min.js - for create a material button.
menu.js - main menu code.
mobile-menu.js - mobile menu code.
popper.min.js - manage poppers in web applications.
portfolio-filter.js - filter portfolio cards.
progress-list.js - animate progress bars.
section.js - animate titles of sections.
site-btn.js - animate buttons.
slider-carousel.js - slider code.

If you want add new js-code you can edit these files with except for bootstrap.min.js, jquery.waypoints.js, mbclicker.min.js and popper.min.js or add new.

Editing source code

First of all you need to prepare your environment.

  1. Download and install latest stable version of node.js and npm.

  2. Install gulp: npm i gulp-cli.

  3. Open the folder with project in terminal (or cmd) and run: npm i.

  4. After you edit source .scss files run gulp or gulp build to compile your changes.

.scss-files have next structure:

  • template
    • assets
      • scss
        • base
        • components
        • generic
        • objects
        • settings
        • tools
        • utilities
        • vendor
        • main.scss

Resources:

Good luck ;)