Digital portfolio – website template

Digital portfolio – website template

0 49250
Digital portfolio - website template

Digital portfolio – website template

Today we will create a single page template for our portfolio. As you know, your own portfolio has always been an important attribute for almost everyone. As a rule, they emphasize the character and originality. It describes the strengths (and sometimes weaknesses) features. It is quite important to show originality. Sometimes such sites known as business-card websites. Typically, such site consists of one (sometimes more) page. Today we consider creation of a page that consists of the following sections: header (logo with menu), promo section with slider, main content section with popup feature, about us section, contact us section with popup form, address section with google maps and footer.

As a framework that will help us in the layout, I decided to take Bootstrap (v3). Also because it has native support of responsiveness. As you know, in accordance with the recommendations of Google, the sites need to be responsive.

Live Demo

So here we go, first of all, create few folders – ‘css’, ‘fonts’, ‘images’ and ‘js’. Here we will keep the appropriate files: css stylesheets, font files, images and javascript files. After, you can download last version of Bootstrap, and extract its files into our appropriate directories. Also, you can download a ready archive of the demo using the form at the end of this article.

Header

header

This menu is created using the following code

  <!-- top navigation -->
  <header id="headernav">
    <a href="#mslider" class="logo" data-scroll><span class="icon-logo"></span> Logo</a>
    <nav class="nav-collapse">
      <ul>
        <li class="menu-item"><a href="#mslider" data-scroll><span class="fa fa-user"></span>Home</a></li>
        <li class="menu-item"><a href="#services" data-scroll><span class="fa fa-cog"></span>Services</a></li>
        <li class="menu-item"><a href="#portfolio" data-scroll><span class="fa fa-eye open"></span>Portfolio</a></li>
        <li class="menu-item"><a href="#about" data-scroll><span class="fa fa-info sign"></span>About</a></li>
        <li class="menu-item"><a href="#contact" data-scroll><span class="fa fa-paper-plane"></span>Contact</a></li>
        <li class="menu-item"><a href="#" class="lang">EN</a></li>
        <li class="menu-item"><a href="#/de" class="lang">DE</a></li>
        <li class="menu-item"><a href="#/ru" class="lang">RU</a></li>
      </ul>
    </nav>
  </header>
  <!-- /top navigation -->

Promo section

promo

The monitor on this picture displays slideshow. Here is markup of this promo section:

  <!-- intro slider -->
  <section id="mslider">
    <div id="wrap" class="wrap">
      <div class="mockup">
        <img class="mockup__img" src="images/bg.jpg" alt="alt text" />
        <div class="screen">
          <ul id="slideshow" class="slideshow">
            <li class="slideshow__item"><img src="images/slideshow/1.jpg" alt=""/></li>
            <li class="slideshow__item"><img src="images/slideshow/2.jpg" alt=""/></li>
            <li class="slideshow__item"><img src="images/slideshow/3.jpg" alt=""/></li>
            <li class="slideshow__item"><img src="images/slideshow/4.jpg" alt=""/></li>
          </ul>
        </div>
        <header class="main-header">
          <h1 class="animated fadeInRight delay-1s">Here can be some intro information about the company</h1>
          <div class="learn-more-wrap">
            <a href="#services" class="animated fadeInUp delay-2s learn-more" data-scroll><span>Learn More</span></a>
          </div>
        </header>
      </div>
    </div>
  </section>
  <!-- /intro slider -->

Main content section

This section consists of two parts: ‘Our services’ and ‘Our portfolio’.

services

The following HTML code is for the ‘Services’ section:

  <!-- services -->
  <section class="text-center section-padding" id="services">
    <div class="container">
      <div class="row">
        <h1>Our Services</h1>
        <div class="services-wrapper">
          <div class="col-md-4 wp2">
            <div class="light-box box-hover">
              <div class="icon">
                <img src="images/bulb.svg" alt="">
              </div>
              <h2>Lorem Ipsum 1</h2>
              <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
            </div>
          </div>
          <div class="col-md-4 wp2 delay-05s">
            <div class="light-box box-hover">
              <div class="icon">
                <img src="images/printer.svg" alt="">
              </div>
              <h2>Lorem Ipsum 2</h2>
              <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
            </div>
          </div>
          <div class="col-md-4 wp2 delay-1s">
            <div class="light-box box-hover">
              <div class="icon">
                <img src="images/browser.svg" alt="">
              </div>
              <h2>Lorem Ipsum 3</h2>
              <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /services -->

portfolio

And here is HTML code for the ‘Portfolio’ section:

  <!-- portfolio -->
  <section class="clearfix" id="portfolio" >
    <div class="text-center portfolioheader">
      <h1>Our portfolio</h1>
      <p>Browse our portfolio</p>
    </div>
    <div class="grid">
      <!-- project 0 -->
      <div id="project0" class="zoom-anim-dialog mfp-hide projects">
        <h1>Project 1</h1>
        <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
        <a href="#" target="_blank" class="projectlink">Visit Website</a>
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
      </div>
      <a class="popup-with-zoom-anim" href="#project0">
        <figure class="effect-portfolio wp4 delay-01s">
          <img src="images/project-thumb.jpg" alt=""/>
          <figcaption>
            <h2>Project 1</h2>
            <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
            <span class="icon-project0_icon"></span>
          </figcaption>
        </figure>
      </a>
      <!-- /project 0 -->
      <!-- project 1 -->
      <div id="project1" class="zoom-anim-dialog mfp-hide projects">
        <h1>Project 2</h1>
        <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
        <a href="#" target="_blank" class="projectlink">Visit Website</a>
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
      </div>
      <a class="popup-with-zoom-anim" href="#project1">
        <figure class="effect-portfolio wp4 delay-01s">
          <img src="images/project-thumb2.jpg" alt=""/>
          <figcaption>
            <h2>Project 2</h2>
            <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
            <span class="icon-project1-icon"></span>
          </figcaption>
        </figure>
      </a>
      <!-- /project 1 -->
      <!-- project 2 -->
      <div id="project2" class="zoom-anim-dialog mfp-hide projects">
        <h1>Project 3</h1>
        <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
        <a href="#" target="_blank" class="projectlink">Visit Website</a>
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
      </div>
      <a class="popup-with-zoom-anim" href="#project2">
        <figure class="effect-portfolio wp4 delay-05s">
          <img src="images/project-thumb2.jpg" alt=""/>
          <figcaption>
            <h2>Project 3</h2>
            <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
            <span class="icon-project2-icon"></span>
          </figcaption>
        </figure>
      </a>
      <!-- /project 2 -->
      <!-- project 3 -->
      <div id="project3" class="zoom-anim-dialog mfp-hide projects">
        <h1>Project 4</h1>
        <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
        <a href="#" target="_blank" class="projectlink">Visit Website</a>
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
      </div>
      <a class="popup-with-zoom-anim" href="#project3">
        <figure class="effect-portfolio wp4 delay-05s">
          <img src="images/project-thumb.jpg" alt=""/>
          <figcaption>
            <h2>Project 4</h2>
            <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
            <span class="icon-project3-icon"></span>
          </figcaption>
        </figure>
      </a>
      <!-- /project 3 -->
      <!-- project 4 -->
      <div id="project4" class="zoom-anim-dialog mfp-hide projects">
        <h1>Project 5</h1>
        <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
        <a href="#" target="_blank" class="projectlink">Visit Website</a>
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
      </div>
      <a class="popup-with-zoom-anim" href="#project4">
        <figure class="effect-portfolio wp4 delay-05s">
          <img src="images/project-thumb.jpg" alt=""/>
          <figcaption>
            <h2>Project 5</h2>
            <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
            <span class="icon-project4-icon"></span>
          </figcaption>
        </figure>
      </a>
      <!-- /project 4 -->
      <!-- Project 5 -->
      <div id="project5" class="zoom-anim-dialog mfp-hide projects">
        <h1>Project 6</h1>
        <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
        <a href="#" target="_blank" class="projectlink">Visit Website</a>
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
        <img src="images/project.jpg" alt="">
      </div>
      <a class="popup-with-zoom-anim" href="#project5">
        <figure class="effect-portfolio wp4 delay-05s">
          <img src="images/project-thumb2.jpg" alt=""/>
          <figcaption>
            <h2>Project 6</h2>
            <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
            <span class="icon-project5-icon"></span>
          </figcaption>
        </figure>
      </a>
      <!-- /project 5 -->
    </div>
    <!-- /Grid -->
  </section>
  <!-- /portfolio -->

When you move the cursor over any of the projects – it displays additional information. And when you click – a popup with more information about the project will appear, here you can put whatever you want (any html code) – text, images, video.

details

‘About us’ section

about us

This simple section consists of two columns: image is on the left and information about us is on the right

  <!-- about -->
  <section class="light-bg text-center" id="about">
    <div class="container-fluid nopadding">
      <div class="wrapper">
        <div class="aboutimgwrap">
          <div class="wp3 aboutimg"></div>
        </div>
      </div>
      <div class="container about">
        <div class="row">
          <div class="col-md-5 col-md-offset-7">
            <h1>About Us</h1>
            <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
            <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
            <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
            <p>Vivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /about -->

‘Contact us’ section

contact us

This is quite complex element that consits of this small section with ‘send message’ button and hidden popup form with bootstrap validation. Below is HTML code:

  <!-- contact -->
  <section class="dark-bg text-center section-padding contact-wrap" id="contact">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Contact Us</h1>
          <h2>Want to discuss? Get in touch!</h2>
          <a id="trigger-overlay" class="animated fadeInDown delay-2s send-message" href="#contact" data-scroll><span>Send us a message</span></a>
        </div>
      </div>
    </div>
  </section>
  <!-- /contact -->
  <!-- contact form -->
  <div id="pro">
    <div class="overlay overlay-contentpush">
      <button type="button" class="overlay-close">Close</button>
      <div class="container">
        <div class="projectplanner">
          <h1>Want to discuss?</h1>
          <h2>We'd love to hear from you.</h2>
          <div class="container">
            <div class="col-sm-offset-3 col-sm-6">
              <form name="sentMessage" class="contactForm" id="contactForm" novalidate>
                <div class="control-group">
                  <div class="controls">
                    <label for="name">Name</label>
                    <input type="text" class="form-control input-lg" placeholder="Name *" id="name" required data-validation-required-message="Please enter your name" />
                    <p class="help-block"></p>
                  </div>
                </div>
                <div class="control-group">
                  <div class="controls">
                    <label for="email">Email</label>
                    <input type="email" class="form-control input-lg" placeholder="Email address *" id="email" required data-validation-required-message="Please enter your email" />
                    <p class="help-block"></p>
                  </div>
                </div>
                <div class="control-group">
                  <div class="controls">
                    <label for="website">Website</label>
                    <input type="text" class="form-control input-lg" placeholder="Website" id="website" />
                    <p class="help-block"></p>
                  </div>
                </div>
                <div class="control-group">
                  <div class="controls">
                    <label for="message">Message</label>
                    <textarea rows="10" cols="100" class="form-control input-lg" placeholder="How can we help? *" id="message" required
                      data-validation-required-message="Please enter your message" minlength="5"
                      data-validation-minlength-message="Min 5 characters" maxlength="999" style="resize:none"></textarea>
                    <p class="help-block"></p>
                  </div>
                </div>
                <div id="success"> </div>
                <button type="submit" class="submit-btn center-block">Send Message</button><br />
                <span class="required">* required fields</span>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /contact form -->

Map and Footer

Map and Footer

Finally – two small sections of the map where you can specify your location and footer.

  <!-- Google map -->
  <div id="cd-google-map">
    <div id="google-container"></div>
    <div id="cd-zoom-in"></div>
    <div id="cd-zoom-out"></div>
    <address>Our address</address>
  </div>
  <!-- /Google map -->
  <!-- footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-md-6 copyright">
          <h1><span class="icon-logo"></span>Logo</h1>
          <p>Etiam at sapien eu lectus tempor nullam.</p>
          <p>&copy; 2015 Company</p>
        </div>
        <div class="col-md-6 footerlinks">
          <ul>
            <li><a class="up-btn2" href="#mslider">Back to Top</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- /footer -->

Javascript

For our digital portfolio we use a bunch of javascripts:

  <script src="js/jquery.min.js"></script>
  <script src="js/modernizr.custom.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/fastclick.js"></script>
  <script src="js/libraries.min.js"></script>
  <script src="js/overlay.js"></script>
  <script src="js/jqBootstrapValidation.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="js/scripts.js"></script>

They are loaded in the end of our ‘index.html’ file. Nearly all of them are various service libraries. In the last one (scripts.js) we added code for navigation (for smooth scrolling between waypoints), for magnific popup (that is used in Projects), bootstrap validation for ‘Contact us’ form. Also, here you will find the initialization of our slide show.

js/scripts.js

$(document).ready(function() {
  // waypoints
  $('.wp1').waypoint(function() {
    $('.wp1').addClass('animated fadeInLeft');
  }, {
    offset: '75%'
  });
  $('.wp2').waypoint(function() {
    $('.wp2').addClass('animated fadeInUp');
  }, {
    offset: '75%'
  });
  $('.wp3').waypoint(function() {
    $('.wp3').addClass('animated fadeInDown');
  }, {
    offset: '55%'
  });
  $('.wp4').waypoint(function() {
    $('.wp4').addClass('animated fadeInDown');
  }, {
    offset: '75%'
  });
  $('.wp5').waypoint(function() {
    $('.wp5').addClass('animated fadeInUp');
  }, {
    offset: '75%'
  });
  $('.wp6').waypoint(function() {
    $('.wp6').addClass('animated fadeInDown');
  }, {
    offset: '75%'
  });
  // Magnific Popup
  $('.popup-with-zoom-anim').magnificPopup({
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in'
  });
  $('.popup-with-move-anim').magnificPopup({
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-slide-bottom'
  });
  // contact form validation
  $("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
    },
    submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit behaviour
      // get values from FORM
      var name = $("input#name").val();
      var email = $("input#email").val();
      var website = $("input#website").val();
      var message = $("textarea#message").val();
      var firstName = name; // For Success/Failure Message
      // Check for white space in name for Success/Fail message
      if (firstName.indexOf(' ') >= 0) {
        firstName = name.split(' ').slice(0, -1).join(' ');
      }
      $.ajax({
        url: "",
        type: "POST",
        data: {
          name: name,
          email: email,
          website: website,
          message: message
        },
        cache: false,
        success: function() {
          // Success
          $('#success').html("<div class='alert alert-success'>");
          $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
          $('#success > .alert-success').append("<strong>Your message has been sent. </strong>");
          $('#success > .alert-success').append('</div>');
          //clear all fields
          $('#contactForm').trigger("reset");
        },
        error: function() {
          // Fail
          $('#success').html("<div class='alert alert-danger'>");
          $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
          $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that our mail server is not responding...</strong> Please email us directly at ...");
          $('#success > .alert-danger').append('</div>');
          //clear all fields
          $('#contactForm').trigger("reset");
        },
      })
    },
    filter: function() {
      return $(this).is(":visible");
    },
  });
  $("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
  });
});
// hide success/fail boxes on click
$('#name').focus(function() {
  $('#success').html('');
});
// slideshow
(function() {
  new Slideshow(document.getElementById('slideshow'));
  var body = docElem = window.document.documentElement,
    wrap = document.getElementById('wrap'),
    mockup = wrap.querySelector('.mockup'),
    mockupWidth = mockup.offsetWidth;
  scaleMockup();
  function scaleMockup() {
    var wrapWidth = wrap.offsetWidth,
      val = wrapWidth / mockupWidth;
    mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
    mockup.style.WebkitTransform = 'scale3d(' + val + ', ' + val + ', 1)';
  }
  window.addEventListener('resize', resizeHandler);
  function resizeHandler() {
    function delayed() {
      resize();
      resizeTimeout = null;
    }
    if (typeof resizeTimeout != 'undefined') {
      clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(delayed, 50);
  }
  function resize() {
    scaleMockup();
  }
})();

Live Demo

[sociallocker]

download in package

[/sociallocker]

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply