This tutorial will explain how to create a simple portfolio website using HTML5, CSS3, Jquery. In this case we are trying to create a web portfolio design for a cartoonist, illustrator, or artist. If previously we had created a one page website with a flat design style, now we will again create a one page website, it can even be called just a landing page.

Free Portfolio Templates Layout
Download

Web Portfolio doesn’t need to be too complicated, what is needed is information about who owns the portfolio, examples of work, and contacts who can be contacted, so it’s not too complicated actually creating a portfolio website.

Web Portfolio doesn’t need to be too fancy, it’s quite simple but the contents of the portfolio shouldn’t be simple ~ TWD

Simple tips to make your portfolio more crowded, one of which is to create a blog that is associated with the portfolio, so a blog as a visitor attraction. Hm .. we will not discuss in detail the problem of marketing here 🙂 , back to focus on the tutorial.

Before starting we should know in advance what we are going to make. The following is an example of a portfolio that we will create – DEMO

Ingredients

Just like cooking, making a website also needs ingredients, here are the ingredients we need, because here the author only makes examples, so the examples of his portfolio are taken from several websites, not personal ones.

jquery
CSS Reset from Meyer web
Google Fonts Montez & Sofadi One
Magnific Popup
Critters – Ohh Deer (Image for header)
Q2. What do you do in your spare time? (Image for the How I Work section)
Logan Evolution (Image For Gallary, just for demo)
File Structure

The following file structure has been prepared, the css files are placed in the css folder, the images are placed in the img, the images for the gallery are placed in the images folder, while the popup plugin is in the popup folder.

File Structure
File Structure

HTML Structure
Next we immediately create the HTML structure used. The HTML structure of the template created is already valid based on the W3 Validator.

Creating headers

Boss Tut Web

An Indonesian Illustrator

Creating Headers
Creating Website Content, here we learn to use the display css functions: table , table-row, and table-cell to create columns that are flat in height in the .box class, almost similar in function to the table tag that we usually see How I Work

Step 1: Sketch.

Pencils Graphite (H) on 17×14″ Strathmore Windpower Bristol

Step 2: Inking.

Inks Windsor Newton Series 7s (0-2), Copic Technical Pens, White Out. Scanned at 1200DPI (Bitmap)

Step 3: Coloring.

Finish Treatment: Photoshop Gradiant layers, hue/adjustment layers. Diffusion achieved using solid fill layer based on color channel, blurred and reduced to 20% Opacity.

The code above is for the How I Work part
Creating a Gallary Section, this gallery section is adjusted according to the rules of the Magnific Popup plugin

The code above is for the Testimonial Section
Creating Footer Section

After the display is okay, we add animation to the header so that the header can move slowly, here we use jQuery

(function(window, $) {

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

var y = 0,
f = 0.45;

function move() {
y -= f;
$(‘#banner’).css(‘background-position’, ‘center ‘ + y + ‘px’);
requestAnimationFrame(move);
}
move();

})(windows, jQuery);
The code above is to make the header move
As for the gallery so that popups can appear, we add a script like the following, the script is documented from the plugin.

$(document).ready(function() {
$(‘.gallery’).magnificPopup({
delegates: ‘a’,
type: ‘image’,
tLoading: ‘Loading image #%curr%…’,
mainClass: ‘mfp-img-mobile’,
galleries: {
enabled: true,
navigateByImgClick: true,
tPrev: ‘Previous (Left arrow key)’, // title for left button
tNext: ‘Next (Right arrow key)’, // title for right button
tCounter: ‘%curr% of %total%’, // markup of counter
preload: [0,1] // Will preload 0 – before current, and 1 after the current image
},
images: {
tError: ‘The image #%curr% could not be loaded.’,
titleSrc: function(item) {
return item.el.attr(‘title’) + ‘‘ + item.el.attr(‘desc’) +’‘;
}
}

});
});
The above code to make the popup work properly
Done..

Demo (on desktop & mobile) | Download Code
That’s it for this tutorial, hopefully it will be useful for all of you, if you have any questions, please write them in the comments section.

greetings web design indonesia