Script Tutorials

Digital portfolio – website template

—

by

admin
in

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

01 <!-- top navigation -->
02 <header id="headernav">
03   <a href="#mslider" class="logo" data-scroll><span class="icon-logo"></span> Logo</a>
04   <nav class="nav-collapse">
05     <ul>
06       <li class="menu-item"><a href="#mslider" data-scroll><span class="fa fa-user"></span>Home</a></li>
07       <li class="menu-item"><a href="#services" data-scroll><span class="fa fa-cog"></span>Services</a></li>
08       <li class="menu-item"><a href="#portfolio" data-scroll><span class="fa fa-eye open"></span>Portfolio</a></li>
09       <li class="menu-item"><a href="#about" data-scroll><span class="fa fa-info sign"></span>About</a></li>
10       <li class="menu-item"><a href="#contact" data-scroll><span class="fa fa-paper-plane"></span>Contact</a></li>
11       <li class="menu-item"><a href="#" class="lang">EN</a></li>
12       <li class="menu-item"><a href="#/de" class="lang">DE</a></li>
13       <li class="menu-item"><a href="#/ru" class="lang">RU</a></li>
14     </ul>
15   </nav>
16 </header>
17 <!-- /top navigation -->

Promo section

promo

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

01 <!-- intro slider -->
02 <section id="mslider">
03   <div id="wrap" class="wrap">
04     <div class="mockup">
05       <img class="mockup__img" src="images/bg.jpg" alt="alt text" />
06       <div class="screen">
07         <ul id="slideshow" class="slideshow">
08           <li class="slideshow__item"><img src="images/slideshow/1.jpg" alt=""/></li>
09           <li class="slideshow__item"><img src="images/slideshow/2.jpg" alt=""/></li>
10           <li class="slideshow__item"><img src="images/slideshow/3.jpg" alt=""/></li>
11           <li class="slideshow__item"><img src="images/slideshow/4.jpg" alt=""/></li>
12         </ul>
13       </div>
14       <header class="main-header">
15         <h1 class="animated fadeInRight delay-1s">Here can be some intro information about the company</h1>
16         <div class="learn-more-wrap">
17           <a href="#services" class="animated fadeInUp delay-2s learn-more" data-scroll><span>Learn More</span></a>
18         </div>
19       </header>
20     </div>
21   </div>
22 </section>
23 <!-- /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:

01 <!-- services -->
02 <section class="text-center section-padding" id="services">
03   <div class="container">
04     <div class="row">
05       <h1>Our Services</h1>
06       <div class="services-wrapper">
07         <div class="col-md-4 wp2">
08           <div class="light-box box-hover">
09             <div class="icon">
10               <img src="images/bulb.svg" alt="">
11             </div>
12             <h2>Lorem Ipsum 1</h2>
13             <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
14           </div>
15         </div>
16         <div class="col-md-4 wp2 delay-05s">
17           <div class="light-box box-hover">
18             <div class="icon">
19               <img src="images/printer.svg" alt="">
20             </div>
21             <h2>Lorem Ipsum 2</h2>
22             <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
23           </div>
24         </div>
25         <div class="col-md-4 wp2 delay-1s">
26           <div class="light-box box-hover">
27             <div class="icon">
28               <img src="images/browser.svg" alt="">
29             </div>
30             <h2>Lorem Ipsum 3</h2>
31             <p>Aliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere.</p>
32           </div>
33         </div>
34       </div>
35     </div>
36   </div>
37 </section>
38 <!-- /services -->

portfolio

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

001 <!-- portfolio -->
002 <section class="clearfix" id="portfolio" >
003   <div class="text-center portfolioheader">
004     <h1>Our portfolio</h1>
005     <p>Browse our portfolio</p>
006   </div>
007   <div class="grid">
008     <!-- project 0 -->
009     <div id="project0" class="zoom-anim-dialog mfp-hide projects">
010       <h1>Project 1</h1>
011       <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
012       <a href="#" target="_blank" class="projectlink">Visit Website</a>
013       <img src="images/project.jpg" alt="">
014       <img src="images/project.jpg" alt="">
015       <img src="images/project.jpg" alt="">
016     </div>
017     <a class="popup-with-zoom-anim" href="#project0">
018       <figure class="effect-portfolio wp4 delay-01s">
019         <img src="images/project-thumb.jpg" alt=""/>
020         <figcaption>
021           <h2>Project 1</h2>
022           <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
023           <span class="icon-project0_icon"></span>
024         </figcaption>
025       </figure>
026     </a>
027     <!-- /project 0 -->
028     <!-- project 1 -->
029     <div id="project1" class="zoom-anim-dialog mfp-hide projects">
030       <h1>Project 2</h1>
031       <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
032       <a href="#" target="_blank" class="projectlink">Visit Website</a>
033       <img src="images/project.jpg" alt="">
034       <img src="images/project.jpg" alt="">
035       <img src="images/project.jpg" alt="">
036     </div>
037     <a class="popup-with-zoom-anim" href="#project1">
038       <figure class="effect-portfolio wp4 delay-01s">
039         <img src="images/project-thumb2.jpg" alt=""/>
040         <figcaption>
041           <h2>Project 2</h2>
042           <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
043           <span class="icon-project1-icon"></span>
044         </figcaption>
045       </figure>
046     </a>
047     <!-- /project 1 -->
048     <!-- project 2 -->
049     <div id="project2" class="zoom-anim-dialog mfp-hide projects">
050       <h1>Project 3</h1>
051       <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
052       <a href="#" target="_blank" class="projectlink">Visit Website</a>
053       <img src="images/project.jpg" alt="">
054       <img src="images/project.jpg" alt="">
055       <img src="images/project.jpg" alt="">
056       <img src="images/project.jpg" alt="">
057     </div>
058     <a class="popup-with-zoom-anim" href="#project2">
059       <figure class="effect-portfolio wp4 delay-05s">
060         <img src="images/project-thumb2.jpg" alt=""/>
061         <figcaption>
062           <h2>Project 3</h2>
063           <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
064           <span class="icon-project2-icon"></span>
065         </figcaption>
066       </figure>
067     </a>
068     <!-- /project 2 -->
069     <!-- project 3 -->
070     <div id="project3" class="zoom-anim-dialog mfp-hide projects">
071       <h1>Project 4</h1>
072       <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
073       <a href="#" target="_blank" class="projectlink">Visit Website</a>
074       <img src="images/project.jpg" alt="">
075       <img src="images/project.jpg" alt="">
076     </div>
077     <a class="popup-with-zoom-anim" href="#project3">
078       <figure class="effect-portfolio wp4 delay-05s">
079         <img src="images/project-thumb.jpg" alt=""/>
080         <figcaption>
081           <h2>Project 4</h2>
082           <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
083           <span class="icon-project3-icon"></span>
084         </figcaption>
085       </figure>
086     </a>
087     <!-- /project 3 -->
088     <!-- project 4 -->
089     <div id="project4" class="zoom-anim-dialog mfp-hide projects">
090       <h1>Project 5</h1>
091       <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
092       <a href="#" target="_blank" class="projectlink">Visit Website</a>
093       <img src="images/project.jpg" alt="">
094       <img src="images/project.jpg" alt="">
095       <img src="images/project.jpg" alt="">
096     </div>
097     <a class="popup-with-zoom-anim" href="#project4">
098       <figure class="effect-portfolio wp4 delay-05s">
099         <img src="images/project-thumb.jpg" alt=""/>
100         <figcaption>
101           <h2>Project 5</h2>
102           <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
103           <span class="icon-project4-icon"></span>
104         </figcaption>
105       </figure>
106     </a>
107     <!-- /project 4 -->
108     <!-- Project 5 -->
109     <div id="project5" class="zoom-anim-dialog mfp-hide projects">
110       <h1>Project 6</h1>
111       <h2>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</h2>
112       <a href="#" target="_blank" class="projectlink">Visit Website</a>
113       <img src="images/project.jpg" alt="">
114       <img src="images/project.jpg" alt="">
115       <img src="images/project.jpg" alt="">
116     </div>
117     <a class="popup-with-zoom-anim" href="#project5">
118       <figure class="effect-portfolio wp4 delay-05s">
119         <img src="images/project-thumb2.jpg" alt=""/>
120         <figcaption>
121           <h2>Project 6</h2>
122           <p>Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc.</p>
123           <span class="icon-project5-icon"></span>
124         </figcaption>
125       </figure>
126     </a>
127     <!-- /project 5 -->
128   </div>
129   <!-- /Grid -->
130 </section>
131 <!-- /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

01 <!-- about -->
02 <section class="light-bg text-center" id="about">
03   <div class="container-fluid nopadding">
04     <div class="wrapper">
05       <div class="aboutimgwrap">
06         <div class="wp3 aboutimg"></div>
07       </div>
08     </div>
09     <div class="container about">
10       <div class="row">
11         <div class="col-md-5 col-md-offset-7">
12           <h1>About Us</h1>
13           <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>
14           <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>
15           <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>
16           <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>
17         </div>
18       </div>
19     </div>
20   </div>
21 </section>
22 <!-- /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:

01 <!-- contact -->
02 <section class="dark-bg text-center section-padding contact-wrap" id="contact">
03   <div class="container">
04     <div class="row">
05       <div class="col-md-12">
06         <h1>Contact Us</h1>
07         <h2>Want to discuss? Get in touch!</h2>
08         <a id="trigger-overlay" class="animated fadeInDown delay-2s send-message" href="#contact" data-scroll><span>Send us a message</span></a>
09       </div>
10     </div>
11   </div>
12 </section>
13 <!-- /contact -->
14 <!-- contact form -->
15 <div id="pro">
16   <div class="overlay overlay-contentpush">
17     <button type="button" class="overlay-close">Close</button>
18     <div class="container">
19       <div class="projectplanner">
20         <h1>Want to discuss?</h1>
21         <h2>We'd love to hear from you.</h2>
22         <div class="container">
23           <div class="col-sm-offset-3 col-sm-6">
24             <form name="sentMessage" class="contactForm" id="contactForm" novalidate>
25               <div class="control-group">
26                 <div class="controls">
27                   <label for="name">Name</label>
28                   <input type="text" class="form-control input-lg" placeholder="Name *" id="name" required data-validation-required-message="Please enter your name" />
29                   <p class="help-block"></p>
30                 </div>
31               </div>
32               <div class="control-group">
33                 <div class="controls">
34                   <label for="email">Email</label>
35                   <input type="email" class="form-control input-lg" placeholder="Email address *" id="email" required data-validation-required-message="Please enter your email" />
36                   <p class="help-block"></p>
37                 </div>
38               </div>
39               <div class="control-group">
40                 <div class="controls">
41                   <label for="website">Website</label>
42                   <input type="text" class="form-control input-lg" placeholder="Website" id="website" />
43                   <p class="help-block"></p>
44                 </div>
45               </div>
46               <div class="control-group">
47                 <div class="controls">
48                   <label for="message">Message</label>
49                   <textarea rows="10" cols="100" class="form-control input-lg" placeholder="How can we help? *" id="message" required
50                     data-validation-required-message="Please enter your message" minlength="5"
51                     data-validation-minlength-message="Min 5 characters" maxlength="999" style="resize:none"></textarea>
52                   <p class="help-block"></p>
53                 </div>
54               </div>
55               <div id="success"> </div>
56               <button type="submit" class="submit-btn center-block">Send Message</button><br />
57               <span class="required">* required fields</span>
58             </form>
59           </div>
60         </div>
61       </div>
62     </div>
63   </div>
64 </div>
65 <!-- /contact form -->

Map and Footer

Map and Footer

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

01 <!-- Google map -->
02 <div id="cd-google-map">
03   <div id="google-container"></div>
04   <div id="cd-zoom-in"></div>
05   <div id="cd-zoom-out"></div>
06   <address>Our address</address>
07 </div>
08 <!-- /Google map -->
09 <!-- footer -->
10 <footer>
11   <div class="container">
12     <div class="row">
13       <div class="col-md-6 copyright">
14         <h1><span class="icon-logo"></span>Logo</h1>
15         <p>Etiam at sapien eu lectus tempor nullam.</p>
16         <p>&copy; 2015 Company</p>
17       </div>
18       <div class="col-md-6 footerlinks">
19         <ul>
20           <li><a class="up-btn2" href="#mslider">Back to Top</a></li>
21         </ul>
22       </div>
23     </div>
24   </div>
25 </footer>
26 <!-- /footer -->

Javascript

For our digital portfolio we use a bunch of javascripts:

1 <script src="js/jquery.min.js"></script>
2 <script src="js/modernizr.custom.min.js"></script>
3 <script src="js/bootstrap.min.js"></script>
4 <script src="js/fastclick.js"></script>
5 <script src="js/libraries.min.js"></script>
6 <script src="js/overlay.js"></script>
7 <script src="js/jqBootstrapValidation.js"></script>
8 <script src="https://maps.googleapis.com/maps/api/js"></script>
9 <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

001 $(document).ready(function() {
002   // waypoints
003   $('.wp1').waypoint(function() {
004     $('.wp1').addClass('animated fadeInLeft');
005   }, {
006     offset: '75%'
007   });
008   $('.wp2').waypoint(function() {
009     $('.wp2').addClass('animated fadeInUp');
010   }, {
011     offset: '75%'
012   });
013   $('.wp3').waypoint(function() {
014     $('.wp3').addClass('animated fadeInDown');
015   }, {
016     offset: '55%'
017   });
018   $('.wp4').waypoint(function() {
019     $('.wp4').addClass('animated fadeInDown');
020   }, {
021     offset: '75%'
022   });
023   $('.wp5').waypoint(function() {
024     $('.wp5').addClass('animated fadeInUp');
025   }, {
026     offset: '75%'
027   });
028   $('.wp6').waypoint(function() {
029     $('.wp6').addClass('animated fadeInDown');
030   }, {
031     offset: '75%'
032   });
033   // Magnific Popup
034   $('.popup-with-zoom-anim').magnificPopup({
035     type: 'inline',
036     fixedContentPos: false,
037     fixedBgPos: true,
038     overflowY: 'auto',
039     closeBtnInside: true,
040     preloader: false,
041     midClick: true,
042     removalDelay: 300,
043     mainClass: 'my-mfp-zoom-in'
044   });
045   $('.popup-with-move-anim').magnificPopup({
046     type: 'inline',
047     fixedContentPos: false,
048     fixedBgPos: true,
049     overflowY: 'auto',
050     closeBtnInside: true,
051     preloader: false,
052     midClick: true,
053     removalDelay: 300,
054     mainClass: 'my-mfp-slide-bottom'
055   });
056   // contact form validation
057   $("input,textarea").jqBootstrapValidation({
058     preventSubmit: true,
059     submitError: function($form, event, errors) {
060       // something to have when submit produces an error ?
061       // Not decided if I need it yet
062     },
063     submitSuccess: function($form, event) {
064       event.preventDefault(); // prevent default submit behaviour
065       // get values from FORM
066       var name = $("input#name").val();
067       var email = $("input#email").val();
068       var website = $("input#website").val();
069       var message = $("textarea#message").val();
070       var firstName = name; // For Success/Failure Message
071       // Check for white space in name for Success/Fail message
072       if (firstName.indexOf(' ') >= 0) {
073         firstName = name.split(' ').slice(0, -1).join(' ');
074       }
075       $.ajax({
076         url: "",
077         type: "POST",
078         data: {
079           name: name,
080           email: email,
081           website: website,
082           message: message
083         },
084         cache: false,
085         success: function() {
086           // Success
087           $('#success').html("<div class='alert alert-success'>");
088           $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
089           $('#success > .alert-success').append("<strong>Your message has been sent. </strong>");
090           $('#success > .alert-success').append('</div>');
091           //clear all fields
092           $('#contactForm').trigger("reset");
093         },
094         error: function() {
095           // Fail
096           $('#success').html("<div class='alert alert-danger'>");
097           $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
098           $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that our mail server is not responding...</strong> Please email us directly at ...");
099           $('#success > .alert-danger').append('</div>');
100           //clear all fields
101           $('#contactForm').trigger("reset");
102         },
103       })
104     },
105     filter: function() {
106       return $(this).is(":visible");
107     },
108   });
109   $("a[data-toggle=\"tab\"]").click(function(e) {
110     e.preventDefault();
111     $(this).tab("show");
112   });
113 });
114 // hide success/fail boxes on click
115 $('#name').focus(function() {
116   $('#success').html('');
117 });
118 // slideshow
119 (function() {
120   new Slideshow(document.getElementById('slideshow'));
121   var body = docElem = window.document.documentElement,
122     wrap = document.getElementById('wrap'),
123     mockup = wrap.querySelector('.mockup'),
124     mockupWidth = mockup.offsetWidth;
125   scaleMockup();
126   function scaleMockup() {
127     var wrapWidth = wrap.offsetWidth,
128       val = wrapWidth / mockupWidth;
129     mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
130     mockup.style.WebkitTransform = 'scale3d(' + val + ', ' + val + ', 1)';
131   }
132   window.addEventListener('resize', resizeHandler);
133   function resizeHandler() {
134     function delayed() {
135       resize();
136       resizeTimeout = null;
137     }
138     if (typeof resizeTimeout != 'undefined') {
139       clearTimeout(resizeTimeout);
140     }
141     resizeTimeout = setTimeout(delayed, 50);
142   }
143   function resize() {
144     scaleMockup();
145   }
146 })();
Live Demo

[sociallocker]

download in package

[/sociallocker]